<template>
	<v-scale-screen width="100vw" height="100vh" fullscreen style="margin:0;padding:0;">
		<!-- <div ref="page" id="page"> -->
		<div ref="page"
			style="width:100%;height:100vh;position:relative;background-color:#000;margin:0 auto;overflow:hidden;padding:0.1rem;padding-top:0;">
			<!-- <div  :class="isShow?'optionTree':'optionTreeHidden'" ref="optionTree">
			<div class="treeHead">
				<span style="font-size:0.3rem;color:#222;font-size:0.36rem;font-weight:700;">项目列表</span>

				<i class="el-icon-refresh  treeIcon" style="cursor: pointer;" @click="getProduct"></i>

			</div>
			<el-input style="width:94%;transform:translateY(-0.4rem);font-size:0.3rem;" placeholder="输入关键字进行项目过滤"
				v-model="filterText">
			</el-input>

			<el-tree
				style="width:94%;transform: translateY(-0.2rem);color:#222;font-size:0.4rem!important;font-weight:700;"
				ref="tree" :data="options" icon-class="el-icon-office-building" :filter-node-method="filterNode"
				node-key="id" :current-node-key="optionId" :highlight-current="true" :check-on-click-node="true"
				:default-checked-keys="defaultKey" @node-click="handleNodeClick">
			</el-tree>
		</div> -->
			<div class="fixed_btn" v-show="show_icon">
				<!-- 每一个按钮 -->
				<div @click="showOption1">
					<!-- <div class="container"> -->
					<div class="fixed_icon1 fixed_icon">
					</div>
					<div class="fixed_title">切换项目</div>
					<!-- </div> -->
				</div>
				<!-- 每一个按钮 -->

				<div @click="showOption2">
					<div class="fixed_icon3 fixed_icon">
					</div>
					<div class="fixed_title">监控大屏</div>
				</div>
				<!-- 每一个按钮 -->

				<div @click="goExit('control')">
					<div class="fixed_icon2 fixed_icon">
					</div>
					<div class="fixed_title">控制台</div>
				</div>

				<!-- 每一个按钮 -->

				<div v-if="screenThree" @click="fullScreenThree">
					<div class="fixed_icon4 fixed_icon">
					</div>
					<div class="fixed_title">退出全屏</div>
				</div>

				<div v-else @click="fullScreenThree">
					<div class="fixed_icon5 fixed_icon">
					</div>
					<div class="fixed_title">全屏显示</div>
				</div>
			</div>
			<!-- 两个小三角图标 -->
			<div class="sanjiao">
				<div class="sanjiaoIcon1" v-if="show_icon" @click="change_show_icon"><i class="el-icon-caret-bottom"></i>

				</div>
				<div class="sanjiaoIcon2" v-else @click="change_show_icon"><i class="el-icon-caret-top"></i>

				</div>
			</div>
			<!-- 切换项目的选项 -->
			<div class="optionListBox1" ref="optionListBox" v-show="optionList1">
				<div class="itemOption1 over" :class="optionName == item.label ? 'activeOption' : ''"
					v-for="(item, i) in options" :key="'k' + item.value" @click="changeOption(item, $event)">
					<span>{{ item.label }}</span>
				</div>
			</div>
			<!-- 大屏的选项 -->
			<div class="optionListBox2" ref="optionListBox" v-show="optionList2">
				<div class="itemOption1 over" :class="optionName2 == item.label ? 'activeOption' : ''"
					v-for="(item, i) in options2" :key="'k' + item.value" @click="changeOption2(item, $event)">
					<span>{{ item.label }}</span>
				</div>
			</div>
			<div class="mainRightFull" ref="mainRight">
				<el-tabs type="border-card" :before-leave="beforeLeave" class="tabsOption" ref="tabCard"
					v-model="topTab" @tab-click="mainClick">
					<el-tab-pane name="data" ref="data">
						<span slot="label"><i class="el-icon-monitor" style="margin-right: 3px;"></i>实时数据</span>
						<el-form v-model="form" inline
							style="margin:0 auto;text-align: left;height:1rem;line-height:1rem;margin-top:0.2rem;">
							<el-form-item>
								<span class="labelName">设备:</span>
								<el-tooltip placement="top" :hide-after="after" effect="light">
									<div slot="content" style="line-height:0.4rem;">支持多选,可同时监控多个设备</div>
									<!-- <el-select v-model="form.device"  class="inpu" multiple collapse-tags  placeholder="" @change="changeDataDevice(form.device)"> -->
									<el-select v-model="form.device" class="inpu" multiple collapse-tags
										:placeholder="lookAll ? '全部设备' : ''">
										<el-option class="oneOption" v-for="item in devices" :key="item.value"
											:value="item.value" :label="item.label" :disabled="item.disabled"
											:style="{ color: item.disabled ? '#aaa' : '', 'text-align': 'left', 'padding-left': '0.3rem' }">
										</el-option>
									</el-select>
								</el-tooltip>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="mini"
									@click="getManyLiveData(form.device)">监控已选</el-button>
								<el-button type="primary" size="mini" @click="getAllLiveData()">监控全部</el-button>
                <!-- {{win.screen.width}}{{win.screen.height}} -->
								<!-- <el-button type="primary" size="small" @click="refreshManyDeviceData(form.device)">刷新</el-button> -->
							</el-form-item>
							<el-button icon="el-icon-arrow-down" v-if="allExpand && equipDataTree.length > 1"
								title="点击全部收起" class="allExpand" @click="showAllDevice(false)"></el-button>
							<el-button icon="el-icon-arrow-up" v-if="!allExpand && equipDataTree.length > 1"
								title="点击全部展开" class="allExpand" @click="showAllDevice(true)"></el-button>
						</el-form>
						<div class="deviceData clear" ref="deviceData" v-show="already">
							<div v-for="(equip, i) in equipDataTree" :key="equip.id" class="oneDevice">
								<!-- <div style="width:100%;height:0.8rem;line-heigth:0.8rem;background-color:rgba(0, 0, 0, 0.5);color:white;margin:0 auto;padding:0 0.15rem;"> -->
								<div class="bottom_top clear" style="width:100%;border-radius:4px;">
									<div class="bottom_top_left"
										style="border-top-left-radius:4px;border-bottom-left-radius:4px;">
										<div style="float:left;width:5.8rem;height:0.8rem;line-height:0.8rem;">
											<!-- <span class="oneDeviceName">设备名称:</span> -->
											<i class="el-icon-s-tools pointName"
												:style="{ 'color': equip.type == 3 ? 'deepskyblue' : '' }"></i>
											<span class="oneDeviceName over"
												:style="{ 'color': equip.type == 3 ? 'deepskyblue' : '' }">{{
				equip.equip_name }}</span>

										</div>
										<div v-if="equip.network_way < 3 && equip.is_on == 1"
											style="float:right;margin-left:0.5rem;">
											<span style="font-size: 0.3rem;color:#eef;">信号强度:</span>
											<!-- <span :style="{'color':equip.is_on==1?'lightgreen':'red'}">{{equip.is_on==1?'在线':'离线'}}</span> -->
											<img style="width:0.5rem;height:0.5rem;vertical-align: middle;margin-top: -1px;"
												:src="equip.signalIcon" />
										</div>


										<div style="float:right;margin-left:0.5rem;">
											<span style="font-size: 0.3rem;color:#eef;">报警状态:</span>
											<i class="el-icon-bell"
												:class="equip.is_alarm == 1 ? 'alarm_on' : 'alarm_off'"
												style="transform:none;vertical-align: middle;margin-top:-1px;"></i>
											<!-- <span :style="{'color':equip.is_alarm==1?'red':'lightgreen'}">{{equip.is_alarm==1?'正在报警':'正常'}}</span> -->
										</div>
										<div style="float:right;margin-left:0.5rem;">
											<span style="font-size: 0.3rem;color:#eef;">在线状态:</span>
											<!-- <span :style="{'color':equip.is_on==1?'lightgreen':'red'}">{{equip.is_on==1?'在线':'离线'}}</span> -->
											<span :class="equip.is_on == 1 ? 'onlineState' : 'offlineState'"></span>
										</div>

									</div>
									<!-- <el-form v-model="equip.oneDeviceForm" inline
										style="width:auto;float:left;text-align: left;height:0.8rem;line-height:0.8rem;margin-right:0.4rem;"> -->
									<el-form v-model="equip.oneDeviceForm" inline class="bottom_top_right">

										<el-form-item v-show="equip.type == 1 && equip.groups_count > 1">
											<span
												style="display:inline-block;width:1.6rem;vertical-align:top;line-height:0.8rem;text-align:right;font-size: 0.3rem;color:#fff;">变量分组:</span>
											<el-select v-model="equip.oneDeviceForm.sgroup_id"
												@change="changeDataGroup(i)" style="width:5rem;height:0.6rem;"
												class="oneDeviceSeclt">
												<el-option class="oneOption" v-for="item in equip.groupList"
													:key="item.id" :value="item.id" :label="item.sgroup_name">
												</el-option>
											</el-select>
										</el-form-item>
										<el-form-item v-if="Number(equip.vars_count)">
											<span
												style="display:inline-block;width:1.6rem;vertical-align:top;line-height:0.8rem;text-align:right;font-size: 0.3rem;color:#fff;">变量属性:</span>
											<!-- <el-select v-model="equip.oneDeviceForm.data_type" style="width:2.8rem;height:0.6rem;" class="oneDeviceSeclt" -->
											<el-select v-model="equip.oneDeviceForm.data_type"
												style="width:5rem;height:0.6rem;" class="oneDeviceSeclt"
												@change="changeDataType(equip.oneDeviceForm.data_type, i)">
												<el-option class="oneOption" v-for="item in dataTypes" :key="item.value"
													:value="item.value" :label="item.label">
												</el-option>
											</el-select>
										</el-form-item>
										<el-form-item v-if="equip.app_scene == 8">
											<el-button type="primary" size="mini"
												@click="showPhoto(equip.id, equip.equip_name)">拍照</el-button>
										</el-form-item>
									</el-form>
									<div class="rightIcon">
										<!-- <el-button icon="el-icon-video-camera" v-if="equip.cameras_count" title="点击可查看监控视频" class="oneExpand" @click=""></el-button> -->
										<el-button icon="el-icon-refresh" title="点击刷新" class="oneExpand"
											@click="refreshOneDeviceData(equip.id, equip.oneDeviceForm.data_type)"></el-button>
										<el-button icon="el-icon-arrow-down" v-if="equip.visible" title="点击收起"
											class="oneExpand" @click="showOneDevice(i, false)"></el-button>
										<el-button icon="el-icon-arrow-up" v-else title="点击展开" class="oneExpand"
											@click="showOneDevice(i, true)"></el-button>
									</div>
								</div>
								<div id="isfull" v-if="equip.type == 1 && equip.visible">
									<div v-for="(group, n) in equip.groups" :key="group.id">
										<div
											v-show="equip.oneDeviceForm.sgroup_id == group.id || equip.oneDeviceForm.sgroup_id == 0">
											<div v-show="equip.groups_count > 1 && ((equip.oneDeviceForm.data_type == 1 && group.sensors.real.length) || (equip.oneDeviceForm.data_type == 2 && group.sensors.vars.length))"
												class="slave_top">
												<!-- <span>子设备:</span> -->
												<span>●</span>
												<span :title="'组名:' + group.sgroup_name">{{ group.sgroup_name
													}}</span>
												<!-- <el-button type="primary" size="mini"
											style="float:right;margin-top:2px;margin-left:0.2rem;width:1.2rem;height:0.5rem;line-height:0.5rem;padding:0;"
											@click="refreshOneSlaveData(equip.id,equip.oneDeviceForm.slave_id,equip.oneDeviceForm.data_type)">刷新</el-button> -->
											</div>
											<div v-show="equip.oneDeviceForm.data_type == 1 && equip.visible">
												<SensorRealData v-if="group.sensors.real.length" :equip="equip"
													:slave="group" :baseurl="baseurl" :changeVal="changeVal"
													:changeState="changeState" :changeState2="changeState2"
													:changeState3="changeState3" :changeState4="changeState4"
													:roundLineLive="roundLineLive" />
												<div v-if="!group.sensors.real.length && equip.oneDeviceForm.sgroup_id != 0"
													style="display:block!important;text-align:center;color:#999;font-size:0.3rem;">
													{{ equip.groups_count <= 1 ? '该设备暂无实时数据' : '该分组暂无实时数据' }} </div>
												</div>
												<div v-if="equip.oneDeviceForm.data_type == 2 && equip.visible">
													<SensorVarData v-if="group.sensors.vars.length" :equip="equip"
														:slave="group" :baseurl="baseurl" :changeVal="changeVal"
														:changeState="changeState" :changeState2="changeState2"
														:changeState3="changeState3" :changeState4="changeState4" />
													<div v-if="!group.sensors.vars.length && equip.oneDeviceForm.sgroup_id != 0"
														class="databox"
														style="display:block!important;text-align:center;color:#999;font-size:0.3rem;">
														{{ equip.groups_count <= 1 ? '该设备暂无参数数据' : '该分组暂无参数数据' }} </div>
													</div>
												</div>
											</div>
										</div>
										<div v-if="(equip.type == 2 || equip.type == 3) && equip.visible" id="isfull">
											<div v-show="equip.oneDeviceForm.data_type == 1 && equip.visible">
												<SensorRealData v-if="equip.sensors.real.length" :equip="equip"
													:slave="equip" :baseurl="baseurl" :changeVal="changeVal"
													:changeState="changeState" :changeState2="changeState2"
													:changeState3="changeState3" :changeState4="changeState4"
													:roundLineLive="roundLineLive" />
												<div v-else style="width:100%;text-align:center;font-size: 16px;">
													该设备暂无实时数据</div>
											</div>
											<div v-if="equip.oneDeviceForm.data_type == 2 && equip.visible">
												<SensorVarData v-if="equip.sensors.vars.length" :equip="equip"
													:slave="equip" :baseurl="baseurl" :changeVal="changeVal"
													:changeState="changeState" :changeState2="changeState2"
													:changeState3="changeState3" :changeState4="changeState4" />
												<div v-else class="databox"
													style="display:block!important;text-align:center;color:#999;font-size:0.3rem;">
													该设备暂无参数数据
												</div>
											</div>
										</div>
									</div>
								</div>
					</el-tab-pane>
					<el-tab-pane v-if="showViewTab" name="view" ref="view"><span slot="label"><i
								class="el-icon-postcard" style="margin-right: 3px;"></i>组态监控</span>
						<!-- <div style="width:100%;height:1.2rem;margin:0 auto;">
							<el-form v-model="viewForm" inline
								style="min-width:18%;float:left;text-align: left;height:1rem;line-height:1rem;margin-top:0.2rem;">
								<el-form-item>
									<span class="labelName">组态:</span>
									<el-select v-model="viewForm.view_id" class="inpu viewInput"
										@change="changeView(viewForm.view_id)" placeholder="单选,默认第一个组态">
										<el-option class="oneOption" v-for="item in viewList" :key="item.value"
											:value="item.value" :label="item.label" :disabled="item.disabled"
											:style="{ color: item.disabled ? '#aaa' : '', 'text-align': 'left', 'padding-left': '0.3rem' }">
										</el-option>
									</el-select>
								</el-form-item>

							</el-form>
							<el-button type="primary" size="mini" id="goback" style="margin-left:0.4rem;"
								@click="fullViewScreen">全屏显示</el-button>
							<el-button type="primary" size="mini" id="goback" v-if="drawList.length > 1 && !isPlay"
								@click="swiperStage">图纸轮播</el-button>
							<el-button type="primary" size="mini" id="goback" v-if="drawList.length > 1 && isPlay"
								@click="stopTrunView">停止轮播</el-button>
							<el-button type="primary" size="mini" id="goback" @click="refreshViewAndData">刷新</el-button>
						</div> -->
						<iframe v-if="viewForm.stage_id && showView && topTab == 'view'"
							:src="'static/optionZT/client_view.html?stageId=' + viewForm.stage_id" id="mainIframe"
							name="mainIframe" ref="mainIframe" class="fram" frameborder="no"
							></iframe>
						<div :class="isFullViewscreen?'viewbtnFull':'viewbtn_2'">
							<img v-if="isFullViewscreen" src="../../static/back.png" style="margin-left:0;"  title="点击退出全屏" @click="fullViewScreen" />
							<i v-else class="el-icon-full-screen" style="cursor: pointer;margin-left:0;"  title="点击进入全屏"
							    @click="fullViewScreen"></i>
              <i class="el-icon-refresh  " style="cursor: pointer;" title="点击刷新画面"
								@click="refreshViewAndData"></i>
							<img src="../../static/list.png" style="margin-left:0.12rem;" title="显示\隐藏组态列表"
								v-if="viewList.length > 1" @click="fullList = !fullList" />
						</div>
						<div :class="isFullViewscreen?'viewBoxFull':'viewBox'" v-if="viewList.length > 1 && fullList">
							<div class="oneView" :class="nowView == item.label ? 'active_2' : ''"
								v-for="(item, i) in viewList" :key="i" @click="changeStage(item, $event)"><span>{{
				item.label }}</span></div>
						</div>
					</el-tab-pane>
					<el-tab-pane name="statement"><span slot="label"><i class="el-icon-data-board"
								style="margin-right: 3px;"></i>数据报表</span>
						<el-form v-model="tableForm" inline
							style="width:100%;float:left;text-align: left;height:1rem;line-height:1rem;margin-top:0.2rem;">
							<el-form-item>
								<span class="labelName">报表名称:</span>
								<el-select v-model="tableForm.title" class="inpu"
									@change="getAnalysisData(tableForm.title, tableForm.value, tableForm.type, statementType)">
									<el-option class="oneOption" v-for="item in tableTables" :key="item.value"
										:value="item.value" :label="item.label"
										style="text-align:left;padding-left:0.3rem">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<span class="labelName">报表类型:</span>
								<el-select v-model="tableForm.type" class="inpu"
									@change="changeAnalysisType(tableForm.type, statementType)">
									<el-option class="oneOption" v-for="item in tableTypes" :key="item.value"
										:value="item.value" :label="item.label"
										style="text-align:left;padding-left:0.3rem">
									</el-option>
								</el-select>
							</el-form-item>

							<el-form-item>
								<span v-if="tableForm.type == 1" class="labelName">日期选择:</span>
								<span v-if="tableForm.type == 3" class="labelName">月份选择:</span>
								<span v-if="tableForm.type == 4" class="labelName">年份选择:</span>
								<el-date-picker v-if="tableForm.type == 1" v-model="tableForm.value" type="date"
									@change="getAnalysisData(tableForm.title, tableForm.value, tableForm.type, statementType)"
									value-format="yyyy-MM-dd" align="left" style="width:5rem!important;">
								</el-date-picker>
								<el-date-picker v-if="tableForm.type == 3" v-model="tableForm.value" type="month"
									@change="getAnalysisData(tableForm.title, tableForm.value, tableForm.type, statementType)"
									value-format="yyyy-MM" align="left" style="width:5rem!important;">
								</el-date-picker>
								<el-date-picker v-if="tableForm.type == 4" v-model="tableForm.value" type="year"
									@change="getAnalysisData(tableForm.title, tableForm.value, tableForm.type, statementType)"
									value-format="yyyy" align="left" style="width:5rem!important;">
								</el-date-picker>
							</el-form-item>
							<el-form-item v-if="tableTables.length && statementType == 'table'">
								<el-button type="primary" size="mini" style="margin-left:0.3rem;"
									@click="getStatementGraph(tableForm.title, tableForm.type, tableForm.value, 'chart')">
									曲线显示</el-button>
							</el-form-item>
							<el-form-item v-if="tableTables.length && statementType == 'chart'">
								<el-button type="primary" size="mini" style="margin-left:0.3rem;"
									@click="getAnalysisData(tableForm.title, tableForm.value, tableForm.type, 'table')">
									表格显示</el-button>
							</el-form-item>
							<el-form-item v-if="tableTables.length && statementType == 'table'">
								<el-button type="primary" size="mini" @click="sendOutTable()">导出</el-button>
							</el-form-item>
						</el-form>
						<div class="deviceData" style="overflow: hidden;">
							<div v-show="statementType == 'table'" class="container_table" style="height:100%;overflow:hidden; margin-top: 1px;border:none;">
								<el-table :data="tableData" fit size="small" ref="reportTable" style="width:100%;" height="99%" :header-cell-style="{
				'background-color': 'rgba(19,128,128,0.5)',
				'color': '#eee',
				'fontSize': '0.3rem',
				'whiteSpace': 'nowrap',
				'border': '1px solid rgba(19,128,128,1)'
			}" :row-style="{ 'border': '1px solid rgba(19,128,128,1)' }" :cell-style="setCellColor">

									<el-table-column v-for="(label, n) in tableFields" :key="'kl' + n" :fixed="n==0?true:false" :label="label"
										align="center" :min-width="n==0?80:120">

										<template slot-scope="scope">
											<span>{{ scope.row[n] }}</span>
										</template>
									</el-table-column>
								</el-table>
							</div>
							<div v-show="statementType == 'chart'" style="width:100%;height:100%;position:relative;">
								<div id="statementChart" ref="statementChart" v-loading="loadingStatement"
									element-loading-text="正在加载中..."></div>
								<span class="chartTip">点击下方图示,可隐藏或显示对应曲线</span>
							</div>

						</div>
					</el-tab-pane>
					<el-tab-pane name="history"><span slot="label"><i class="el-icon-s-data"
								style="margin-right: 3px;"></i>历史数据</span>

						<el-form v-model="historyForm" inline
							style=" width:100%;float:left;text-align: left;height:1rem;line-height:1rem;margin-top:0.2rem;">
							<el-form-item>
								<span class="labelName">设备:</span>
								<el-select v-model="historyForm.device" class="inpu"
									@change="changeHistoryDevice(historyForm.device)" placeholder="单选,默认第一个">
									<el-option class="oneOption" v-for="item in devices" :key="'e' + item.value"
										:value="item.value" :label="item.label" :disabled="item.disabled"
										:style="{ color: item.disabled ? '#aaa' : '', 'text-align': 'left', 'padding-left': '0.3rem' }">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item v-show="historyForm.deviceType == 1 && historyForm.groupsCount > 1">
								<span class="labelName">变量分组:</span>
								<el-select v-model="historyForm.sgroup_id" class="inpu"
									@change="changeHistoryGroup(historyForm.sgroup_id)" placeholder="单选,默认第一个">
									<el-option class="oneOption" v-for="item in historyGroups" :key="'g' + item.value"
										:value="item.value" :label="item.label" :disabled="item.disabled"
										:style="{ color: item.disabled ? '#aaa' : '', 'text-align': 'left', 'padding-left': '0.3rem' }">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<span class="labelName">数据点:</span>
								<el-select v-model="historyForm.sensorIds" class="inpu"
									@change="changeHistorySensor(historyForm.sensorIds)" multiple collapse-tags
									clearable :placeholder="historyType == 'table' ? '可多选,默认全部' : '可多选,默认前10条(或全部)'">
									<el-option class="oneOption" v-for="item in varSensors" :key="'s' + item.value"
										:value="item.value" :label="item.label"
										:style="{ color: item.disabled ? '#aaa' : '', 'text-align': 'left', 'padding-left': '0.3rem' }">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<span class="labelName">时间:</span>
								<el-date-picker v-model="historyForm.value" type="daterange" align="left" class="inpu"
									@change="changeHistoryTime(historyForm.value)" unlink-panels
									value-format="yyyy-MM-dd" range-separator="-" start-placeholder="开始日期"
									end-placeholder="结束日期" :picker-options="pickerOptions">
								</el-date-picker>
							</el-form-item>
							<el-form-item v-if="historyType == 'chart' && varSensors.length">
								<el-button type="primary" size="mini" style="vertical-align:middle;"
									@click="showHistoryTable(1, queryParams.pageSize, historyForm.device, historyForm.sgroup_id, historyForm.sensorIds.join(','), historyForm.value.join('~'))">表格展示</el-button>
							</el-form-item>
							<el-form-item v-if="historyType == 'table' && varSensors.length">
								<el-button type="primary" size="mini" style="vertical-align:middle;"
									@click="getHistoryChart(historyForm.device, historyForm.sgroup_id, historyForm.sensorIds.join(','), historyForm.value.join('~'))">曲线展示</el-button>
							</el-form-item>
							<el-form-item v-if="historyType == 'table'">
								<el-button type="primary" size="mini"
									style="vertical-align:middle;margin-left:-0.25rem;"
									@click="sendOutHistory">导出</el-button>
								<!-- <a :href="'https://api.ykiot.net/api/equip/download?id='+historyForm.device
								+'&sgroup_id='+historyForm.sgroup_id+'&sensor_id='+historyForm.sensorIds.join(',')+'&date_range='+historyForm.value.join('~')+'&token='+win.localStorage.getItem('attoken')"
								style="vertical-align:middle;color:white;margin-left:-0.25rem;" target="_blank"
								class="newAll">导出</a> -->
							</el-form-item>
						</el-form>
						<div class="deviceData">
							<div v-show="historyType == 'table'" class="container_table" style="height:calc(100% - 1.4rem);margin-top:1px;">
								<el-table :data="historyData" fit size="small" ref="historyTable" height="99%" style="width:100%;" :header-cell-style="{
				'background-color': 'rgba(19,128,128,0.5)',
				'color': '#eee',
				'fontSize': '0.3rem',
				'whiteSpace': 'nowrap',
				'border': '1px solid rgba(19,128,128,1)'
			}" :row-style="{ 'border': '1px solid rgba(19,128,128,1)' }"
									:cell-style="{ 'fontSize': '0.3rem', 'border': '1px solid rgba(19,128,128,1)' }">
									<el-table-column prop="num" label="序号" align="center" min-width="50" fixed>
									</el-table-column>
									<el-table-column prop="time" label="上报时间" align="center" min-width="140" fixed>
									</el-table-column>
									<el-table-column v-for="item in fields" :key='item.value' :label="item.label"
										align="center" :min-width="item.label.length > 5 ? '100' : '74'">
										<template slot-scope="scope">
											<span>{{ scope.row.data[item.value] }}</span>
										</template>
									</el-table-column>

								</el-table>
								<div class="pagination">
									<el-pagination @size-change="handleSizeChange" @current-change="current_change"
										:current-page="queryParams.pageNo" :page-size="queryParams.pageSize"
										:page-sizes="[20, 30, 50]" layout="total,
									sizes, prev, pager, next, jumper" :total="queryParams.total">
									</el-pagination>
								</div>
							</div>
							<div v-if="historyType == 'chart' && varSensors.length"
								style="width:100%;height:100%;position:relative;">
								<div id="historyChart" ref="historyChart" v-loading="loadingHistory"
									element-loading-text="正在加载中..."></div>
								<span class="chartTip">点击下方图示,可隐藏或显示对应曲线</span>
							</div>
							<div v-if="historyType == 'chart' && !varSensors.length"
								style="width:100%;height:100%;position:relative;">
								<!-- <div id="historyChart" ref="historyChart" v-loading="loadingHistory" element-loading-text="正在加载中..."></div> -->
								<div style="font-size:0.3rem;color:#ccc;margin-top:0.2rem;text-align:center;">
									暂无数据或暂无数据点启用数据存储</div>
							</div>
							<div v-if="historyType == 'wait'"
								style="width:100%;height:100%;font-size:0.3rem;text-align:center;">
								正在进行适配计算,稍等...
							</div>
						</div>
					</el-tab-pane>


					<el-tab-pane name="analysis"><span slot="label"><i class="el-icon-data-board"
								style="margin-right: 3px;"></i>数据分析</span>
						<el-form v-model="analysisForm" inline
							style="width:100%;float:left;text-align: left;height:2.2rem;line-height:0.8rem;margin-top:0.2rem;">
							<el-form-item>
								<span class="labelName">设备:</span>
								<el-select v-model="analysisForm.device" class="inpu"
									@change="changeAnalysisDevice(analysisForm.device)" placeholder="单选,默认第一个">
									<el-option class="oneOption" v-for="item in devices" :key="item.value"
										:value="item.value" :label="item.label" :disabled="item.disabled"
										:style="{ color: item.disabled ? '#aaa' : '', 'text-align': 'left', 'padding-left': '0.3rem' }">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item v-show="analysisForm.deviceType == 1 && analysisForm.groupsCount > 1">
								<span class="labelName">变量分组:</span>
								<el-select v-model="analysisForm.sgroup_id" class="inpu"
									@change="changeAnalysisGroup(analysisForm.sgroup_id)" placeholder="单选,默认第一个">
									<el-option class="oneOption" v-for="item in analysisGroups" :key="item.value"
										:value="item.value" :label="item.label" :disabled="item.disabled"
										:style="{ color: item.disabled ? '#aaa' : '', 'text-align': 'left', 'padding-left': '0.3rem' }">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<span class="labelName"
									:style="{ 'margin-left': analysisForm.groupsCount > 1 ? '0' : '0.3rem' }">数据点:</span>
								<el-select v-model="analysisForm.sensorIds" class="inpu"
									@change="changeAnalysisSensor(analysisForm.sensorIds)" multiple collapse-tags
									clearable placeholder="可多选,默认前5个">
									<el-option class="oneOption" v-for="item in analysisVarSensors" :key="item.value"
										:value="item.value" :label="item.label"
										:style="{ color: item.disabled ? '#aaa' : '', 'text-align': 'left', 'padding-left': '0.3rem' }">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<span class="labelName"
									:style="{ 'margin-left': analysisForm.groupsCount > 1 ? '0' : '0.3rem' }">算法:</span>
								<el-select v-model="analysisForm.methodsValue" class="inpu"
									@change="changeAnalysisMethod(analysisForm.methodsValue)" multiple collapse-tags
									clearable placeholder="可多选,默认前三个">
									<el-option class="oneOption" v-for="item in analysisMethods" :key="item.value"
										:value="item.value" :label="item.label"
										style="text-align:left;padding-left:0.3rem">
									</el-option>
								</el-select>
							</el-form-item></br>
              <el-form-item :class="(win.screen.width==1024 && win.screen.height==640)?'marTop_9':'marTop_2'" >
								<span class="labelName">周期:</span>
								<el-select v-model="analysisForm.period" class="inpu"
									@change="changeAnalysisPeriod(analysisForm.period)">
									<el-option class="oneOption" v-for="item in periods" :key="item.value"
										:value="item.value" :label="item.label"
										style="text-align:left;padding-left:0.3rem">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item v-if="analysisForm.period != '1m'"
								style="margin-left:0.3rem;" :class="(win.screen.width==1024 && win.screen.height==640)?'marTop_9':'marTop_2'">
								<span class="labelName">时间段:</span>
								<el-date-picker v-model="analysisForm.value" type="daterange" align="left" class="inpu"
									@change="changeAnalysisTime(analysisForm.value)" unlink-panels
									value-format="yyyy-MM-dd" range-separator="-" start-placeholder="开始日期"
									end-placeholder="结束日期" :picker-options="pickerOptions">
								</el-date-picker>
							</el-form-item>
							<el-form-item v-else  :class="(win.screen.width==1024 && win.screen.height==640)?'marTop_9':'marTop_2'">
								<span class="labelName" style="font-size: 0.3rem;margin-left:0.3rem;">月份段:</span>
								<el-date-picker v-model="analysisForm.value" type="monthrange" value-format="yyyy-MM"
									align="left" class="inpu" style="width:5rem!important;"
									@change="changeAnalysisTime(analysisForm.value)" unlink-panels range-separator="-"
									start-placeholder="开始月份" end-placeholder="结束月份"
									:picker-options="pickerMonthOptions">
								</el-date-picker>
							</el-form-item>
							<el-form-item  v-show="analysisForm.period == '1h'" :class="(win.screen.width==1024 && win.screen.height==640)?'marTop_9':'marTop_2'">
								<span class="labelName">起止点:</span>
								<el-time-select v-model="analysisForm.start_time" align="left" class=""
									style="width:5rem!important;"
									@change="changeAnalysisStartTime(analysisForm.start_time)" placeholder="选择开始时间"
									:picker-options="{ start: '00:00', step: '01:00', end: '23:00' }">
								</el-time-select>
							</el-form-item>
							<el-form-item v-if="analysisType != 'table' && analysisFields.length"
								 :class="(win.screen.width==1024 && win.screen.height==640)?'marTop_9':'marTop_2'">
								<el-button type="primary" size="mini" style="vertical-align:middle;"
									@click="getAnalysis(analysisForm.device, analysisForm.sensorIds.join(','),
				analysisForm.methodsValue.join(','), analysisForm.period, analysisForm.value.join('~'), analysisForm.start_time, 'table')">数据表格</el-button>
							</el-form-item>
							<el-form-item v-if="analysisType != 'chart' && analysisFields.length"
								 :class="(win.screen.width==1024 && win.screen.height==640)?'marTop_9':'marTop_2'">
								<el-button type="primary" size="mini" style="vertical-align:middle;"
									@click="getAnalysis(analysisForm.device, analysisForm.sensorIds.join(','),
				analysisForm.methodsValue.join(','), analysisForm.period, analysisForm.value.join('~'), analysisForm.start_time, 'chart')">数据曲线</el-button>
							</el-form-item>
							<el-form-item v-if="analysisType != 'bar' && analysisFields.length"
								 :class="(win.screen.width==1024 && win.screen.height==640)?'marTop_9':'marTop_2'">
								<el-button type="primary" size="mini" style="vertical-align:middle;"
									@click="getAnalysis(analysisForm.device, analysisForm.nowSensors[0].value,
				analysisForm.methodsValue.join(','), analysisForm.period, analysisForm.value.join('~'), analysisForm.start_time, 'bar')">集合柱图</el-button>
							</el-form-item>
							<el-form-item v-if="analysisType == 'table' && analysisFields.length"
								 :class="(win.screen.width==1024 && win.screen.height==640)?'marTop_9':'marTop_2'">
								<el-button type="primary" size="mini" @click="sendOutAnalysis()">导出</el-button>
							</el-form-item>
						</el-form>
						<div class="analysisData" style="overflow: hidden;">
							<div class="container_table" style="height:100%;margin-top:1px;" v-show="analysisType == 'table'">
								<!-- <el-table :data="analysisData" fit show-summary :summary-method="getSummary" -->
                <el-table :data="analysisData" fit size="small" ref="analysisTable" style="width:100%;" height="99%" :header-cell-style="{
				'background-color': 'rgba(19,128,128,0.5)',
				'color': '#eee',
				'fontSize': '0.3rem',
				'whiteSpace': 'nowrap',
				'border': '1px solid rgba(19,128,128,1)'

			}" :row-style="{ 'border': '1px solid rgba(19,128,128,1)' }"
									:cell-style="{ 'fontSize': '0.3rem', 'border': '1px solid rgba(19,128,128,1)' }">
									<el-table-column prop="num" label="序号" type="index" align="center" :min-width="40"
										fixed>
									</el-table-column>
									<el-table-column prop="time" label="时间" align="center" :min-width="100" fixed>
									</el-table-column>
									<el-table-column v-for="(item, i) in analysisFields" :key="i" :label="item"
										align="center" :min-width="120">
										<el-table-column v-for="(sub, n) in analysisForm.methods" :key="sub.value"
											:label="sub.label" align="center"
											:min-width="sub.value == 'pass' ? 80 : 60" :prop="sub.value + '_' + i">
											<template slot-scope="scope">
												<span>{{ scope.row[sub.value + '_' + i] }}</span>
											</template>
										</el-table-column>
									</el-table-column>
								</el-table>
							</div>
							<div class="analysis_echart" v-if="analysisType == 'chart' && analysisFields.length"
								style="width:100%;height:100%;position:relative;margin-top:0;">
								<div id="analysisChart" ref="analysisChart" v-loading="loadingAnalysis"
									element-loading-text="正在加载中...">
								</div>
								<span class="chartTip">点击下方图示,可隐藏或显示对应曲线</span>
								<div class="methodSelsct">
									<span class="labelName">当前算法:</span>
									<el-select v-model="nowMethod" class="inpu"
										@change="getAnalysis(analysisForm.device, analysisForm.sensorIds.join(','),
				analysisForm.methodsValue.join(','), analysisForm.period, analysisForm.value.join('~'), analysisForm.start_time, 'chart', nowMethod)">
										<el-option class="oneOption" v-for="item in analysisForm.methods"
											:key="item.value" :value="item.value" :label="item.label"
											style="text-align:left;padding-left:0.3rem">
										</el-option>
									</el-select>
								</div>
							</div>

							<div class="analysis_echart" v-if="analysisType == 'bar' && analysisFields.length"
								style="width:100%;height:100%;position:relative;margin-top:0;">
								<div id="analysisBar" ref="analysisBar" v-loading="loadingAnalysis"
									element-loading-text="正在加载中..."></div>
								<!-- <span class="chartTip">点击图示,可隐藏或显示对应曲线</span> -->
								<div class="methodSelsct">
									<span class="labelName">当前变量:</span>
									<el-select v-model="nowAnalysisSensor" class="inpu"
										@change="getAnalysis(analysisForm.device, nowAnalysisSensor,
				analysisForm.methodsValue.join(','), analysisForm.period, analysisForm.value.join('~'), analysisForm.start_time, 'bar', '')">
										<el-option class="oneOption" v-for="item in analysisForm.nowSensors"
											:key="item.value" :value="item.value" :label="item.label"
											style="text-align:left;padding-left:0.3rem">
										</el-option>
									</el-select>
								</div>
							</div>

							<div v-if="analysisType == 'chart' && !analysisFields.length"
								style="width:100%;height:1rem;line-height: 1rem;position:relative;">

								<div style="font-size:0.3rem;color:#ccc;text-align:center;">
									暂无数据或暂无数据点启用数据存储</div>
							</div>
							<div v-if="analysisType == 'bar' && !analysisFields.length"
								style="width:100%;height:1rem;line-height: 1rem;position:relative;">

								<div style="font-size:0.3rem;color:#ccc;text-align:center;">
									暂无数据或暂无数据点启用数据存储</div>
							</div>
							<div v-if="analysisType == 'wait'"
								style="width:100%;height:1rem;line-height: 1rem;font-size:0.3rem;text-align:center;">
								正在进行适配计算,稍等...
							</div>
						</div>
					</el-tab-pane>
					<!-- <el-tab-pane name="power"><span slot="label" ><i class="el-icon-data-board"></i>示功图</span>
						<el-form v-model="powerForm" inline
							style="width:100%;float:left;text-align: left;height:1rem;line-height:1rem;border-bottom:1px solid #ccc;margin-top:0.2rem;">
							<el-form-item>
								<span style="font-size: 0.3rem;">设备:</span>
								<el-select v-model="powerForm.device"  class="inpu"
									@change=""  placeholder="单选,默认第一个">
									<el-option  class="oneOption" v-for="item in devices" :key="item.value" :value="item.value" :label="item.label" :disabled="item.disabled"
										:style="{color:item.disabled?'#aaa':'','text-align':'left','padding-left':'0.3rem'}">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item v-show="powerForm.deviceType==1 && powerForm.slavesCount>1">
								<span style="font-size: 0.3rem;">子设备:</span>
								<el-select v-model="powerForm.slave_id"  class="inpu"
									@change=""  placeholder="单选,默认第一个">
									<el-option  class="oneOption" v-for="item in powerSlaves" :key="item.value" :value="item.value" :label="item.label" :disabled="item.disabled"
										:style="{color:item.disabled?'#aaa':'','text-align':'left','padding-left':'0.3rem'}">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<span style="font-size: 0.3rem;">数据点:</span>
								<el-select v-model="powerForm.sensorIds"  class="inpu"
									@change="" >
									<el-option  class="oneOption" v-for="item in powerVarSensors" :key="item.value" :value="item.value" :label="item.label"
										:style="{color:item.disabled?'#aaa':'','text-align':'left','padding-left':'0.3rem'}">
									</el-option>
								</el-select>
							</el-form-item>

							<el-form-item>
								<el-button type="danger" size="small" class="timebtn" @click="deletePowerChart">删除</el-button>
							</el-form-item>
						</el-form>
						<div class="deviceData" style="width:99.4%">

						<div id="powerChartLive" ref="powerChartLive" v-loading="powerLoading" element-loading-text="等待数据发送中..."
						 element-loading-spinner="el-icon-loading"></div>
						 </div>
					</el-tab-pane> -->
					<el-tab-pane name="alarm"><span slot="label"><i class="el-icon-bell"
								style="margin-right: 3px;"></i>报警记录</span>
						<el-form v-model="alarmForm" inline
							style=" width:100%;float:left;text-align: left;height:1rem;line-height:1rem;margin-top:0.2rem;">
							<el-form-item>
								<span class="labelName">设备:</span>
								<el-select v-model="alarmForm.device" class="inpu" multiple collapse-tags
									placeholder="可多选,默认全部">
									<el-option class="oneOption" v-for="item in devices" :key="item.value"
										:value="item.value" :label="item.label" :disabled="item.disabled"
										:style="{ color: item.disabled ? '#aaa' : '', 'text-align': 'left', 'padding-left': '0.3rem' }">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<span class="labelName">时间:</span>
								<el-date-picker v-model="alarmForm.value" type="daterange" align="left" class="inpu"
									unlink-panels value-format="yyyy-MM-dd" range-separator="-" start-placeholder="开始日期"
									end-placeholder="结束日期" :picker-options="pickerOptions">
								</el-date-picker>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="mini"
									@click="getAlarm(queryParams_2.pageNo, queryParams_2.pageSize, alarmForm.device, alarmForm.value.join('~'))">查询</el-button>
								<el-button type="primary" size="mini" @click="getAllAlarm()">全选并查询</el-button>
							</el-form-item>

						</el-form>
						<div class="deviceData">
							<div class="container_table">
								<el-table :data="alarmData" size="small" fit style="width:100%;" :header-cell-style="{
				'background-color': 'rgba(19,128,128,0.5)',
				'color': '#eee',
				'fontSize': '0.3rem',
				'whiteSpace': 'nowrap',
				'border': '1px solid rgba(19,128,128,1)'

			}" :row-style="{ 'border': '1px solid rgba(19,128,128,1)' }"
									:cell-style="{ 'fontSize': '0.3rem', 'border': '1px solid rgba(19,128,128,1)' }">
									<el-table-column label="ID" prop="id" align="center" min-width="60" fixed>
									</el-table-column>
									<el-table-column prop="equip_name" label="设备名称" align="center" min-width="140"
										fixed>
									</el-table-column>
									<el-table-column prop="sgroup_name" label="分组名称" align="center" min-width="140">
									</el-table-column>
									<el-table-column prop="sensor_name" label="数据点名称" align="center" min-width="140">
									</el-table-column>
									<el-table-column prop="alarm_type" label="报警类型" align="center" min-width="120">
									</el-table-column>
									<el-table-column prop="trigger_cond" label="触发条件" align="center" min-width="120">
									</el-table-column>
									<el-table-column prop="trigger_value" label="触发值" align="center" min-width="120">
									</el-table-column>
									<el-table-column prop="alarm_time" label="报警时间" align="center" min-width="180">
									</el-table-column>
								</el-table>
								<div class="pagination">
									<el-pagination @size-change="handleSizeChange_2" @current-change="current_change_2"
										:current-page="queryParams_2.pageNo" :page-size="queryParams_2.pageSize"
										:page-sizes="[10, 15, 20]" layout="total,
								 sizes, prev, pager, next, jumper" :total="queryParams_2.total">
									</el-pagination>
								</div>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane name="log"><span slot="label"><i class="el-icon-thumb"
								style="margin-right: 3px;"></i>操作记录</span>
						<el-form v-model="operForm" inline
							style=" width:100%;float:left;text-align: left;height:1rem;line-height:1rem;margin-top:0.2rem;">
							<el-form-item>
								<span class="labelName">设备:</span>
								<el-select v-model="operForm.device" class="inpu" multiple collapse-tags
									placeholder="可多选,默认全部">
									<el-option class="oneOption" v-for="item in devices" :key="item.value"
										:value="item.value" :label="item.label" :disabled="item.disabled"
										:style="{ color: item.disabled ? '#aaa' : '', 'text-align': 'left', 'padding-left': '0.3rem' }">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<span class="labelName">时间:</span>
								<el-date-picker v-model="operForm.value" type="daterange" align="left" class="inpu"
									unlink-panels value-format="yyyy-MM-dd" range-separator="-" start-placeholder="开始日期"
									end-placeholder="结束日期" :picker-options="pickerOptions">
								</el-date-picker>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="mini"
									@click="getLogs(queryParams_3.pageNo, queryParams_3.pageSize, operForm.device, operForm.value.join('~'))">查询</el-button>
								<el-button type="primary" size="mini" @click="getAllLogs()">全选并查询</el-button>
							</el-form-item>

						</el-form>
						<div class="deviceData">
							<div class="container_table">
								<el-table :data="operData" size="small" fit style="width:100%;" :header-cell-style="{
				'background-color': 'rgba(19,128,128,0.5)',
				'color': '#eee',
				'fontSize': '0.3rem',
				'whiteSpace': 'nowrap',
				'border': '1px solid rgba(19,128,128,1)'

			}" :row-style="{ 'border': '1px solid rgba(19,128,128,1)' }"
									:cell-style="{ 'fontSize': '0.3rem', 'border': '1px solid rgba(19,128,128,1)' }">
									<el-table-column label="ID" prop="id" align="center" min-width="60" fixed>
									</el-table-column>
									<el-table-column prop="user_name" label="用户名称" align="center" min-width="120" fixed>
									</el-table-column>
									<el-table-column prop="equip_name" label="设备名称" align="center" min-width="150">
									</el-table-column>
									<el-table-column prop="sgroup_name" label="分组名称" align="center" min-width="150">
									</el-table-column>
									<el-table-column prop="sensor_name" label="数据点名称" align="center" min-width="150">
									</el-table-column>
									<el-table-column prop="value" label="写入值" align="center" min-width="150">
									</el-table-column>
                  <el-table-column prop="result" label="结果" align="center" min-width="100">
                  </el-table-column>
									<el-table-column prop="log_time" label="操作时间" align="center" min-width="120">
									</el-table-column>
								</el-table>
								<div class="pagination">
									<el-pagination @size-change="handleSizeChange_3" @current-change="current_change_3"
										:current-page="queryParams_3.pageNo" :page-size="queryParams_3.pageSize"
										:page-sizes="[10, 15, 20]" layout="total,
								 sizes, prev, pager, next, jumper" :total="queryParams_3.total">
									</el-pagination>
								</div>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane name="map" style="position: relative;"><span slot="label"><i
								class="el-icon-map-location" style="margin-right: 3px;"></i>设备地图</span>
						<div id="content" ref="content" v-loading="mapLoading" element-loading-text="正在加载设备和地图,请稍等..."
							element-loading-spinner="el-icon-loading"></div>
						<div class="search">
							<el-form inline :model="mapForm" class="searchForm">
								<el-form-item>
									<span class="chaxu" style="float:left;vertical-align:top;line-height:0.8rem;">设备状态：</span>
									<el-select v-model="mapForm.state" class="inpu"
										style="background-color:transparent;color:#eee;width:3rem;float:right;vertical-align: top;"
										placeholder="选择设备状态" @change="changeMapDeviceState(mapForm.state)">
										<el-option class="mapOption" v-for="item in states" :key="item.value"
											:value="item.value" :label="item.label" :disabled="item.disabled">
										</el-option>
									</el-select>
								</el-form-item>
							</el-form>
							<!-- <el-form inline :model="mapForm" class="searchForm">
							<el-form-item>
								<span class="chaxu" style="vertical-align:middle;">显示：</span>
								<el-select v-model="mapForm.show_type" class="inpu"
									style="background-color:transparent;color:#eee;width:3rem;vertical-align:middle;"
									placeholder="选择显示内容" @change="changeMapShow(mapForm.show_type)">
									<el-option class="mapOption" v-for="item in mapShowTypes" :key="item.value"
										:value="item.value" :label="item.label" :disabled="item.disabled">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item v-if="mapForm.show_type==1">
								<span class="chaxu">设备状态：</span>
								<el-select v-model="mapForm.state" class="inpu"
									style="background-color:transparent;color:#fff;width:3rem;" placeholder="选择设备状态"
									@change="changeMapDeviceState(mapForm.state)">
									<el-option class="mapOption" v-for="item in states" :key="item.value"
										:value="item.value" :label="item.label" :disabled="item.disabled">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item v-if="mapForm.show_type==2">
								<span class="chaxu">设备名称：</span>
								<el-select v-model="mapForm.equip_id" class="inpu mapDevice" placeholder="选择设备"
									@change="changeGraspEquipOrRange">
									<el-option class="mapOption" v-for="item in graspEquips" :key="item.value"
										:value="item.value" :label="item.label" :disabled="item.disabled">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item v-if="mapForm.show_type==2">
								<span class="chaxu">时间范围：</span>
								<el-date-picker v-model="mapForm.time_range" @change="changeGraspEquipOrRange"
									style="background-color:transparent;color:#fff;" type="datetimerange"
									:picker-options="pickerDateTimeOptions" range-separator="至" start-placeholder="开始日期"
									end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"
									value-format="yyyy-MM-dd HH:mm:ss" align="right">
								</el-date-picker>
							</el-form-item>

						</el-form> -->
						</div>
						<button class="mapbtn" id="mapbtn" ref="mapbtn" @click="fullScreen">
							全屏切换
						</button>
					</el-tab-pane>
					<el-tab-pane v-if="showCameraTab" name="video"><span slot="label"><i class="el-icon-video-camera"
								style="margin-right: 3px;"></i>视频监控</span>
						<!-- 下面三句测试有效，暂用于测试 -->
						<!-- <el-button type="primary" size="small" @click="player1.play()">播放</el-button> -->
						<!-- <el-button type="primary" size="small" @click="player1.pause()">暂停</el-button> -->
						<!-- <el-button type="primary" size="small" @click="player1.stop()">关闭</el-button> -->
						<div v-if="showVideo && cameras.length >= 4" id="cameraData">
							<!-- <div v-for="i in 4" :key="i" class="cameraBox"> -->
							<div class="cameraBox">
								<div style="width:100%;" class="camera">
									<span>选择摄像头：</span>
									<el-select v-model="camera1" placeholder="选择摄像头" style="width:5rem;"
										@change="changeCamera(camera1, 1)">
										<el-option style="text-align:left;padding-left:0.2rem;" v-for="item in cameras"
											:key="item.value" :value="item.value" :label="item.label">
										</el-option>
									</el-select>
									<el-button type="primary" size="mini"
										style="float:right;margin-left:0.4rem;margin-top:4px;">关闭</el-button>
								</div>
								<div class="head_video" ref="videoBox1">
									<!-- 这里动态添加结构 -->
									<div class="imgtit" style="z-index:9999;">视频监控</div>
								</div>
							</div>
							<div class="cameraBox">
								<div style="width:100%;" class="camera">
									<span>选择摄像头：</span>
									<el-select v-model="camera2" placeholder="选择摄像头" style="width:5rem;"
										@change="changeCamera(camera2, 2)">
										<el-option style="text-align:left;padding-left:0.2rem;" v-for="item in cameras"
											:key="item.value" :value="item.value" :label="item.label">
										</el-option>
									</el-select>
									<el-button type="primary" size="mini"
										style="float:right;margin-left:0.4rem;margin-top:4px;">关闭</el-button>
								</div>
								<div class="head_video" ref="videoBox2">
									<!-- 这里动态添加结构 -->
									<div class="imgtit" style="z-index:9999;">视频监控</div>
								</div>
							</div>
							<div class="cameraBox">
								<div style="width:100%;" class="camera">
									<span>选择摄像头：</span>
									<el-select v-model="camera3" placeholder="选择摄像头" style="width:5rem;"
										@change="changeCamera(camera3, 3)">
										<el-option style="text-align:left;padding-left:0.2rem;" v-for="item in cameras"
											:key="item.value" :value="item.value" :label="item.label">
										</el-option>
									</el-select>
									<el-button type="primary" size="mini"
										style="float:right;margin-left:0.4rem;margin-top:4px;">关闭</el-button>
								</div>
								<div class="head_video" ref="videoBox3">
									<!-- 这里动态添加结构 -->
									<div class="imgtit" style="z-index:9999;">视频监控</div>
								</div>
							</div>
							<div class="cameraBox">
								<div style="width:100%;" class="camera">
									<span>选择摄像头：</span>
									<el-select v-model="camera4" placeholder="选择摄像头" style="width:5rem;"
										@change="changeCamera(camera4, 4)">
										<el-option style="text-align:left;padding-left:0.2rem;" v-for="item in cameras"
											:key="item.value" :value="item.value" :label="item.label">
										</el-option>
									</el-select>
									<el-button type="primary" size="mini"
										style="float:right;margin-left:0.4rem;margin-top:4px;">关闭</el-button>
								</div>
								<div class="head_video" ref="videoBox4">

									<div class="imgtit" style="z-index:9999;">视频监控</div>
								</div>
							</div>
						</div>
						<div v-show="showVideo && cameras.length < 4" id="cameraData">
							<div class="cameraBox">
								<div class="head_video_2" ref="videoBox1"
									:title="cameras[0] ? cameras[0].label + '　关联设备:' + cameras[0].equip_name : ''">
									<!-- 这里动态添加结构 -->
									<div class="imgtit" style="z-index:9999;">视频监控</div>
								</div>
							</div>
							<div v-if="cameras[1] && cameras[1].value" class="cameraBox">
								<div class="head_video_2" ref="videoBox2"
									:title="cameras[1] ? cameras[1].label + '　关联设备:' + cameras[1].equip_name : ''">
									<!-- 这里动态添加结构 -->
									<div class="imgtit" style="z-index:9999;">视频监控</div>
								</div>
							</div>
							<div v-if="cameras[2] && cameras[2].value" class="cameraBox">
								<div class="head_video_2" ref="videoBox3"
									:title="cameras[2] ? cameras[2].label + '　关联设备:' + cameras[2].equip_name : ''">
									<!-- 这里动态添加结构 -->
									<div class="imgtit" style="z-index:9999;">视频监控</div>
								</div>
							</div>
						</div>
					</el-tab-pane>
					<!-- <el-tab-pane v-if="productInfo.hasImage" name="image"><span slot="label"><i class="el-icon-picture-outline"></i>项目图片</span>
						<div id="productImage" ref="productImage" class="productImage">
							<img :src="productInfo.product_image" style="width:100%;height:100%;"/>
						</div>
					</el-tab-pane> -->

				</el-tabs>
				<div v-if="!mapFullscreen && !isFullViewscreen" class="topNewMenu">
          <img :src="urlLogo" class="logo"/>
					<span class="platFormTitle">{{ site_name }}</span>
					<div v-for="(item, i) in nowMenu" :key="item.key" class="oneMenu"
						:class="menuActive == item.key ? 'menuActive' : ''" v-if="item.isShow == 1"
						@click="changeMenu(item.key, $event)">
						<!-- <div > -->
						<!-- <i v-if="item.key=='data'" class="el-icon-monitor"></i>
					<i v-else-if="item.key=='view'" class="el-icon-postcard"></i>
          <i v-else-if="item.key=='statement'" class="el-icon-date"></i>
					<i v-else-if="item.key=='history'" class="el-icon-s-data"></i>
					<i v-else-if="item.key=='analysis'" class="el-icon-data-board"></i>
					<i v-else-if="item.key=='alarm'" class="el-icon-bell"></i>
					<i v-else-if="item.key=='log'" class="el-icon-thumb"></i>
					<i v-else-if="item.key=='map'" class="el-icon-map-location"></i>
					<i v-else-if="item.key=='video'" class="el-icon-video-camera"></i> -->
						<span>{{ item.title }}</span>
						<!-- </div> -->
					</div>
					<!-- <i class="el-icon-right"
        	style="position:absolute;font-size:0.6rem;left:0.1rem;top:0.12rem;z-index:10;color:#409eff;cursor:pointer;"
        	title="点击展开项目列表" v-if="!isShow && !isFullViewscreen && ! mapFullscreen" @click="goWidth"></i>
        <i class="el-icon-back"
        	style="position:absolute;font-size:0.6rem;left:0.1rem;top:0.12rem;z-index:10;color:#409eff;cursor:pointer;"
        	title="点击折叠项目列表" v-if="isShow && !isFullViewscreen && ! mapFullscreen" @click="goWidth"></i> -->
					<!-- <div class="exit" style="margin-left:1rem;" @click="showOption"><span class="exitIcon"><i
								class="el-icon-office-building" style="font-size:0.45rem;"></i></span>切换项目</div>
					<div v-if="grade <= 2 && !isFullViewscreen && !mapFullscreen" class="exit"
						@click="goExit('control')"><span class="exitIcon"><i class="el-icon-s-fold"
								style="font-size:0.45rem;"></i></span>控制台</div>
					<div v-if="grade == 3 && !isFullViewscreen && !mapFullscreen" class="exit" @click="goExit('exit')">
						<span class="exitIcon"><i class="el-icon-s-fold" style="font-size:0.45rem;"></i></span>退出登录
					</div>
					<div class="exit" @click="goScreenTotal"><span class="exitIcon"><i class="el-icon-s-platform"
								style="font-size:0.45rem;"></i></span>监控大屏</div> -->

				</div>
				<div class="optionListBox" ref="optionListBox" v-show="optionList">
					<div class="itemOption over" :class="optionName == item.label ? 'activeOption' : ''"
						v-for="(item, i) in options" :key="'o' + item.value" @click="changeOption(item, $event)">
						<span>{{ item.label }}</span>
					</div>
				</div>

			</div>

			<el-dialog width="74%" :visible.sync="innerVisible" v-el-dialog-drag :close-on-click-modal="false"
				append-to-body :show-close="close" :top="win.screen.width >= 1600 ? '160px' : '50px'" class="dial">
				<div class="toptit">
					<span>{{ nowSensor }}</span> | <span>{{ which }}</span>
					<span style="float:right;cursor: pointer;" @click="closeLine">关闭</span>
				</div>
				<!-- <div  class="bottom_top_left" style="width:100%;float:none;height:1rem;line-height:1rem;padding:0;" @click="changeBox"> -->
				<div v-if="sensorSave != 2" class="bottom_top" style="padding:0;margin-top:0.1rem;border:none;"
					@click="changeBox">
					<div id="live" :class="box == 'live' ? 'cardActive' : ''">
						实时曲线
					</div>
					<div id="historyData" :class="box == 'historyData' ? 'cardActive' : ''">
						历史曲线
					</div>
				</div>
				<div class="chartTime big" v-show="box == 'historyData'">
					<span
						style="font-size: 0.3rem;display:inline-block;vertical-align: middle;margin-top:0.1rem;">时间:</span>
					<el-date-picker v-model="form.value" type="daterange"
						style="margin-top: 0.1rem;height:0.6rem;line-height: 0.6rem;" align="left" class="inpu"
						@change="changeChart(form.value)" unlink-panels value-format="yyyy-MM-dd" range-separator="-"
						start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
					</el-date-picker>
				</div>
				<div id="myChart" v-if="box == 'historyData' && !lineout" v-loading="loading_1"
					element-loading-text="正在加载中...">
				</div>
				<div id="without" v-if="box == 'historyData' && lineout == 'history'">抱歉,该数据点暂无历史数据！</div>
				<div id="myChartLive" ref="myChartLive" v-show="box == 'live' && !lineout" v-loading="loading_2"
					element-loading-text="等待数据传输中..."></div>
				<div id="without" v-show="box == 'live' && lineout == 'live'">抱歉,该数据点暂无实时数据！</div>
			</el-dialog>
			<!-- 可变状态改值对话框 -->
			<el-dialog :visible="dialogFormVisible" width="25%" append-to-body :show-close="false" top="300px">
				<div class="toptit">
					<span>改变状态 | {{ sateForm.sensor_name }}</span>
					<span style="float:right;cursor: pointer;" @click="dialogFormVisible = false">关闭</span>
				</div>
				<el-form :model="sateForm" style="text-align:center;margin-top:0.1rem;" inline>
					<el-form-item>
						<el-button type="primary" size="small" @click="setStateVal(0)">置0</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="small" style="margin-left:0.2rem;"
							@click="setStateVal(1)">置1</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="small" style="margin-left:0.2rem;" @click="letOneToZero">先置1，后置0
						</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="small" style="margin-left:0.2rem;" @click="letZeroToOne">先置0，后置1
						</el-button>
					</el-form-item>
				</el-form>
				<!-- <div slot="footer" style="text-align:right;margin-top:-0.5rem;">
				<el-button type="primary" class="btn" style="border:1px solid #ccc;background-color: white;color:#111;" @click="dialogFormVisible=false">取 消</el-button>
			  </div> -->
			</el-dialog>
			<!-- 可清除报警对话框 -->
			<el-dialog :visible="dialogFormVisible_2" width="22%" append-to-body :show-close="false" top="200px">
				<div class="toptit">
					<span>清除报警 | {{ sateForm.sensor_name }}</span>
					<span style="float:right;cursor: pointer;" @click="dialogFormVisible_2 = false">关闭</span>
				</div>
				<el-form :model="sateForm" style="text-align:center;margin-top:0.3rem;" inline>
					<el-form-item>
						<el-button type="primary" size="small" @click="setStateVal(0)">清除</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="small" style="margin-left:0.2rem;"
							@click="dialogFormVisible_2 = false">保留</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
			<el-dialog :visible="dialogSwiperVisible" :width="win.screen.width >= 1600 ? '22%' : '34%'" append-to-body
				:show-close="close" top="220px">
				<div class="toptit">
					<span>图纸轮播设置</span>
					<span style="float: right; cursor: pointer" @click="dialogSwiperVisible = false">关闭</span>
				</div>
				<el-form :model="viewForm" style="text-align: left;margin-top:0.3rem;" block>
					<el-form-item label="轮播间隔:" label-width="110px">
						<el-input style="width:3rem" class="swiperInput" v-model="viewForm.interval"
							placeholder="30秒至600秒" type="number" :min="30" :max="600" :step="10"
							@change="changeInterval(viewForm.interval)"></el-input> s
					</el-form-item>
					<el-form-item label="" label-width="110px" style="margin-top:-0.3rem;">
						<p style="font-size:0.3rem;color:red;">注:限制30至600秒,默认60秒</p>
					</el-form-item>
				</el-form>
				<div style="text-align: right; margin-top: 0.3rem">
					<el-button type="primary" size="small" @click="showTrunView(viewForm.interval)">确 认</el-button>
					<el-button size="small" @click="dialogSwiperVisible = false">取 消</el-button>
				</div>
			</el-dialog>
			<el-dialog :visible="dialogPhotoVisible" :width="win.screen.width >= 1600 ? '55%' : '65%'" v-el-dialog-drag
				v-el-dialog-drag-width append-to-body :show-close="close" top="120px" class="dial">
				<div class="toptit">
					<span>拍照查看 | {{ photoForm.equip_name }}</span>
					<span style="float: right; cursor: pointer" @click="closePhotoDialog()">关闭</span>
				</div>
				<div class="width:100%;height:0.8rem;line-height:0.8rem;">
					<!-- <div class="nowEquip">当前设备：{{photoForm.equip_name}}</div> -->
					<el-button type="primary" size="small" :disabled="photoLoading"
						@click="takeAndUpload(photoForm.id)">拍照上传</el-button>
					<el-button type="danger" size="small" v-if="photoForm.photoList.length > 1" :disabled="photoLoading"
						@click="deleteManyPhoto()">批量删除</el-button>
					<el-button type="danger" size="small" v-if="photoForm.photoList.length > 1" :disabled="photoLoading"
						@click="deleteAllPhoto()">全部删除</el-button>
					<!-- <el-pagination
				  style="float:right;margin-top:0.2rem;"
			      small
			      layout="prev, pager, next"
				  @current-change="currentPhoto"
				  :current-page="currentParams.pageNo"
			      :total="photoForm.photoList.length">
			    </el-pagination> -->
				</div>
				<div class="photoBox" v-loading="photoLoading" element-loading-text="正在拍照并上传,请稍等..."
					element-loading-spinner="el-icon-loading">
					<div class="onePhoto" v-for="(item, i) in photoForm.photoList" :key="item.id">
						<!-- <img :src="baseurl+item.path" title="点击放大" @click="letBig(item.path)"/> -->
						<el-image :src="baseurl + item.path" class="oneImg" title="单击选择"
							@click="deleteSelect($event, item)" lazy></el-image>
						<div class="photoBottom">
							<span>{{ item.time }}</span>
							<span class="delIcon" @click="sureDeletePhoto(item.id, 'single')" title="删除"><i
									class="el-icon-delete"></i></span>
							<!-- <span class="delIcon"  @click="downloadIamge(baseurl+item.path,item.name)"><i class="el-icon-download"></i></span> -->
							<!-- <span class="delIcon"  @click="downloadIamge(item.id)"><i class="el-icon-download"></i></span> -->
							<a class="delIcon" style="color:#fff;" title="下载"
								:href="baseurl + 'api/camera_picture/download?token=' + win.localStorage.getItem('attoken') + '&id=' + item.id"
								:download="item.name" target="_self"><i class="el-icon-download"></i></a>
							<span class="delIcon" style="color:#fff;" title="放大" @click="letBig(item.path)"><i
									class="el-icon-zoom-in"></i></span>
						</div>
					</div>
				</div>
				<!-- <div v-show="photoForm.bigPath" class="bigPhotoBox">
				<img   :src="baseurl+photoForm.bigPath"/>
			</div> -->
				<!-- <div style="text-align: right; margin-top: 0.2rem">
			    <el-button size="small" @click="dialogPhotoVisible = false">取 消</el-button>
			</div> -->
			</el-dialog>
			<el-dialog :visible="bigPhotoVisible" :width="win.screen.width > 1920 ? '1200px' : '800px'" append-to-body
				:show-close="close" top="100px" style="background-color: transparent;">
				<!-- <div class="toptit" style="background-color: transparent;">
				 <span>拍照查看 | {{photoForm.equip_name}}</span>
			</div> -->
				<span class="bigClose" @click="bigPhotoVisible = false"><i class="el-icon-close"></i></span>
				<div v-show="photoForm.bigPath" class="bigPhotoBox">
					<img :src="baseurl + photoForm.bigPath" />
				</div>
			</el-dialog>

		</div>
	</v-scale-screen>
</template>
<script>
import SensorRealData from '../templates/SensorRealData.vue';
import SensorVarData from '../templates/SensorVarData.vue';
import { numToTime } from '../common.js';
export default {
	name: 'mainData',
	data() {
		return {
			// xia下方的显示隐藏按钮
			show_icon: false,
			showScr: true,
			win: window,
			tokenTimer: null,
			fromPage: '',
			fromOrder: '1',
			screenThree: false,
      urlLogo:(this.$baseurl + localStorage.getItem("loginLogo")) || "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/ykwdlogo.png",
			//左侧项目或全局变量
			filterText: '',
			loading: false,
			// productInfo:{
			// 	hasImage:false,
			// 	product_image:''
			// },
			// 大屏的选项
			options2: [
				{ value: 1, label: '监控大屏' },
				{ value: 2, label: '能耗大屏' },
				{ value: 3, label: '地图大屏' }
			],
			optionId: 0,
			optionName: '',
			optionName2: '',
			options: [],
			optionList: false,
			optionList1: false,
			optionList2: false,
			optionNodes: [],
			site_name: localStorage.getItem("site_name"),
			grade: Number(localStorage.getItem("atuser_type")),
			//顶部菜单项数据
			isCustomMenu: false,
			nowMenu: [],
			menuActive: 'data',
			showViewTab: true,
			after: 2000,
			showCameraTab: false,
			isFirst: true,
			topTab: '',
			defaultKey: [0], //id数组
			tableHead: localStorage.getItem("bgcolor"),
			largeScreenId: Number(localStorage.getItem("largeScreenId")),
			mapLoading: false,
			isShow: true,
			devices: [],
			//是否展开所有设备
			lookAll: true,
			//是否选择了所有设备
			//deviceAll:false,
			//数据监控相关变量
			liveData: null,
			already: false,
			form: {
				device: [],
				option: 0,
				// type:1,
				// equip_state:0,
				value: []
			},
			//deviceTab:'data',
			// oneDeviceForm:{
			// 	sgroup_id:0,
			// 	data_type:1,
			// 	value:[]
			// },
			dataTypes: [{
				value: 1,
				label: '实时数据'
			},
			{
				value: 2,
				label: '参数数据'
			}
			],
			sensorSave: 1,
			allExpand: true,
			equipDataTree: [],
			one: 1,
			zero: 0,
			stateWidth: 56,
			stateWidth_2: 80,
			win: window,
			videoList: false,
			video: true,
			player1: null,
			player2: null,
			player3: null,
			player4: null,
			Vcount: 0,
			//拍照
			dialogPhotoVisible: false,
			photoForm: {
				id: 0,
				equip_name: '',
				bigPath: '',
				photoList: [],
				photoIds: []
			},
			photoLoading: false,
			bigPhotoVisible: false,

			//deviceType: 1,
			//slavesCount: 1,
			//slaveName: '',
			deviceName: '设备',
			videoUrl: '',
			//headName: "云垦物联",
			//历史数据相关变量
			source: this.$http.CancelToken.source(),
			historyForm: {
				deviceType: 1,
				groupsCount: 1,
				sensorIds: [],
				device: 0,
				sgroup_id: 0,
				value: ''
			},
			textColor: "#ff0",
			historyGroups: [],
			//historySensors:[],
			historyType: 'table', //table为表格显示 ,chart为曲线显示,wait为额chart拉伸过度
			historyData: [],
			varSensors: [],
			fields: [],
			lines: [],
			//报警数据变量
			alarmForm: {
				device: [],
				value: ''
			},
			//操作记录
			operForm: {
				device: [],
				value: ''
			},
			//数据报表
			tableForm: {
				type: 1,
				title: '',
				value: ''
			},
			statementType: 'table',
			loadingStatement: true,
			tableTables: [],
			tableFields: [],
			tableData: [],
			tableTypes: [{
				value: 1,
				label: "日报"
			},
			// {
			//     value:2,
			//     label:"周报"
			// },
			{
				value: 3,
				label: "月报"
			},
			{
				value: 4,
				label: "年报"
			}
			],
			tableChart: null,
			//数据分析相关变量
			numToTime: numToTime,
			analysisForm: {
				deviceType: 1,
				groupsCount: 1,
				sensorIds: [],
				dailyStartTime: "00:00:00",
				methods: [{
					value: 'max',
					label: '最大值',
					order: 1
				},
				{
					value: 'min',
					label: '最小值',
					order: 2
				},
				{
					value: 'mean',
					label: '平均值',
					order: 3
				},
				],
				nowSensors: [],
				methodsValue: ['max', 'min', 'mean'],
				device: 0,
				period: '1h',
				sgroup_id: 0,
				value: '',
				start_time: ''

			},
			analysisTimeout: null,
			analysisGroups: [],
			analysisData: [],
			nowMethod: 'max',
			nowAnalysisSensor: 0,
			analysisVarSensors: [],
			analysisType: 'table',
			loadingAnalysis: true,
			analysisTables: [],
			analysisFields: [],
			analysisMethods: [{
				value: 'max',
				label: '最大值',
				order: 1
			},
			{
				value: 'min',
				label: '最小值',
				order: 2
			},
			{
				value: 'mean',
				label: '平均值',
				order: 3
			},
			{
				value: 'spread',
				label: '差值',
				order: 4
			}
				// {
				//    value:'pass',
				//    label:'合格率(%)'
				// }
			],
			periods: [
				// {
				//    value:'1m',
				//    label:'1分钟'
				// },
				// {
				//    value:'5m',
				//    label:'5分钟'
				// },
				// {
				//    value:'30m',
				//    label:'30分钟'
				// },
				{
					value: '1h',
					label: '1小时'
				},
				// {
				//    value:'12h',
				//    label:'12小时'
				// },
				{
					value: '1d',
					label: '1天'
				},
				{
					value: '1m',
					label: '1月'
				}
			],
			//示功图相关变量
			powerLoading: false,
			myPowerChartLive: null,
			dataX: [],
			dataY: [],
			powerTimer: null,
			powerForm: {
				deviceType: 1,
				slavesCount: 1,
				sensorIds: [],
				device: 0,
				slave_id: 0,
				value: ''
			},
			powerTimeout: null,
			powerSlaves: [],
			//analysisData: [],
			powerVarSensors: [],
			powerFields: [],
			//上下线
			lineForm: {
				device: [],
				value: ''
			},
			lineData: [],
			//设备地图相关变量
			mapFullscreen: false,
			mapForm: {
				//show_type: 1,
				//equip_id: "",
				//time_range: [],
				state: 0
			},
			graspEquips: [],
			endPoint: [],
			startPoint: [],
			distance: 0,
			mapShowTypes: [{
				value: 1,
				label: '设备定位'
			},
			{
				value: 2,
				label: '设备轨迹'
			}
			],
			states: [{
				value: 0,
				label: '全部'
			},
			{
				value: 1,
				label: '在线正常'
			},
			{
				value: 2,
				label: '在线报警'
			},
			{
				value: 3,
				label: '设备离线'
			}
			],
			pickerDateTimeOptions: {
				shortcuts: [{
					text: '最近10分钟',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 600 * 1000);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近30分钟',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 1800 * 1000);
						picker.$emit('pick', [start, end]);
					}
				},
				{
					text: '最近1小时',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000);
						picker.$emit('pick', [start, end]);
					}
				},
				{
					text: '最近2小时',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 2);
						picker.$emit('pick', [start, end]);
					}
				},
				{
					text: '最近12小时',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 12);
						picker.$emit('pick', [start, end]);
					}
				},
				{
					text: '最近24小时',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24);
						picker.$emit('pick', [start, end]);
					}
				}
					//  {
					// text: '最近三天',
					// onClick(picker) {
					//   const end = new Date();
					//   const start = new Date();
					//   start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
					//   picker.$emit('pick', [start, end]);
					// }
					//  },
					//  {
					// 	text: '最近一周',
					// 	onClick(picker) {
					// 	  const end = new Date();
					// 	  const start = new Date();
					// 	  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
					// 	  picker.$emit('pick', [start, end]);
					// 	}
					//  }
				]
			},
			// pickerMonthOptions: {
			//           shortcuts: [{
			//             text: '本月',
			//             onClick(picker) {
			//               picker.$emit('pick', [new Date(), new Date()]);
			//             }
			//           }, {
			//             text: '上月',
			//             onClick(picker) {
			//               const end = new Date();
			//               const start = new Date();
			//               start.setMonth(start.getMonth() - 1);
			// 			  end.setMonth(end.getMonth() - 1);
			//               picker.$emit('pick', [start, end]);
			//             }
			//           },{
			//             text: '最近两个月',
			//             onClick(picker) {
			//               const end = new Date();
			//               const start = new Date();
			//               start.setMonth(start.getMonth() - 1);
			//               picker.$emit('pick', [start, end]);
			//             }
			//           },
			// 		  {
			//             text: '最近三个月',
			//             onClick(picker) {
			//               const end = new Date();
			//               const start = new Date();
			//               start.setMonth(start.getMonth() - 2);
			//               picker.$emit('pick', [start, end]);
			//             }
			//           },
			// 		  {
			// 		    text: '最近六个月',
			// 		    onClick(picker) {
			// 		      const end = new Date();
			// 		      const start = new Date();
			// 		      start.setMonth(start.getMonth() - 5);
			// 		      picker.$emit('pick', [start, end]);
			// 		    }
			// 		  }]
			// },
			map: null,
			infoWindow: null,
			myIcon: null,
			equipdata: [],
			alarmSocket: null,
			platformAlarmTimer: null,
			markers: [],
			points: [],
			//组态相关变量
			viewList: [],
			drawList: [],
			viewForm: {
				view_id: '',
				stage_id: '',
				interval: 60
			},
			swiperTimer: null,
			isPlay: false, //是否正在图纸轮播
			start: 0,
			dialogSwiperVisible: false,
			isFullViewscreen: false,
			showView: false,
			fullList: false,
			nowView: '',
			//link:false,
			showVideo: false,
			camera1: '',
			camera2: '',
			camera3: '',
			camera4: '',
			cameras: [],
			cameraName: '',
			city: "西安",
			//nowtime: "",
			formLabelWidth: '1rem',
			baseurl: this.$baseurl,
			box: '',
			wsUrl: this.$wssUrl,
			Socket: null,
			loading_1: false,
			loading_2: true,
			loadingHistory: true,
			nowSensor: '',
			which: '',
			lineout: '',
			//groupId: 0,
			myChart: null,
			sateForm: {
				type: 1,
				sensor_name: '',
				equip_id: 0,
				slave_id: 0,
				value: '',
				id: 0,
				ext_vars: {}
			},
			threeSW: '',
			//keyLen: 3,
			//livedata: [],
			//livetimes: [],
			poid: 0,
			chart_2: null,
			hisdata: null,
			//myChartLive: {},
			dialogFormVisible: false,
			dialogFormVisible_2: false,
			dialogFormVisible_4: false,
			//outerVisible: false,
			innerVisible: false,
			// stateWidth_2:56,
			fullscreen: false,
			close: false,
			alarmEquips: [],
			alarmStr: '',

			//alarmStr: '',
			all: false,
			//历史数据分页器
			queryParams: {
				pageNo: 1,
				pageSize: 20,
				total: 0
			},
			//报警记录分页器
			queryParams_2: {
				pageNo: 1,
				pageSize: 20,
				total: 0
			},
			//操作记录分页器
			queryParams_3: {
				pageNo: 1,
				pageSize: 20,
				total: 0
			},
			//上下线记录分页器
			queryParams_4: {
				pageNo: 1,
				pageSize: 20,
				total: 0
			},

			//数据分析分页器,暂时不考虑分页
			// queryParams_5: {
			// 	pageNo: 1,
			// 	pageSize:20,
			// 	total: 0
			// },

			fields: [],
			groups: [{
				value: 0,
				label: '全部'
			}],
			timer: null,
			//nowTimer: null,
			alarmData: [],
			operData: [],
			pickerOptions: this.$pickerOptionsSimple,
			chartValue: [],
			chartItem: {},
			historyTimeout: null,
			//stopChoose:false,
			//model: 1,
			lineColor: [
				"#34c6ff",
				"#ffc34d",
				"#FF7400",
				"#0099ff",
				"#ff53Ad",
				"#BD2020", //#BD2020
				"#ffff00",
				"#55D55B",
				"#9f3ed5",
				"#009999"
			],
			history_chart: {
				//曲线渐变效果，需在echarts插件中加入visualMap(视觉映射)组件
				// visualMap: [{
				//         show:true,
				//         type: 'continuous',
				//         seriesIndex: 0,
				//         min: 0,
				//         max: 400
				// }],
				//backgroundColor:'red',//背景颜色,类似与‘dark’一样表示一种模式
				title: {
					text: '历史时段数据曲线图',
					left: 'center', //center
					top: 5,
					textStyle: { //全局文字样式不包含它
						color: "white"
					}
				},
				legend: {
					data: [],
					//left: 'left',
					left: '1%',
					top: 30,
					textStyle: {
						color: "#fff"
					}
				},
				grid: {
					width: '92%',
					height: '76%',
					left: '4%',
					top: '12%'
				},
				toolbox: {
					show: true,
					right: 30,
					top: 5,
					iconStyle: {
						borderColor: "#eee"
					},
					feature: {
						dataZoom: {
							show: false
						},
						// dataView: {
						// 	show:true,
						// 	readOnly: true
						// },
						// magicType: {    //这里是多数据点而且比较密集，不适合切换柱状图
						// 	type: ['line', 'bar']
						// },
						restore: {
							show: true,
							title: '还原'
						}, //刷新
						saveAsImage: {
							backgroundColor: '#fff',
							excludeComponents: ['toolbox', 'dataZoom'] //导出图片时不显示这两个组件
						}
					}
				},
				dataZoom: [{
					id: 'dataZoomX',
					type: 'slider',
					show: true,
					start: 90,
					end: 100,
					filterMode: 'filter',
					fillerColor: '#fff',
					backgroundColor: '#005353',
					handleStyle: {
						color: 'deepskyblue'
					},
					textStyle: {
						color: '#fff'
					},
					bottom: '2%'
				}

				],
				tooltip: {
					trigger: 'axis',
					textStyle: {
						align: 'left' //提示框文字的对齐方式
					}
				},
				textStyle: {
					color: "white"
					//textBorderColor:'#ff0000',
					//textBorderWidth:5,
				},
				xAxis: {
					data: [],
					//type:'category',  //结合下面的areaStyle形成曲线围成面积区域
					name: '时间',
					boundaryGap: false,
					axisLabel: {
						margin: 10,
						//color:"#fff",
						//backgroundColor: '#111',
						showMinLabel: true,
						showMaxLabel: true
					},
					axisLine: {
						lineStyle: {
							color: "#fff"
						}
					},
					axisTick: {
						length: 6,
						// lineStyle: {
						// 	color: "white"
						// },
						alignWithLabel: true
					}
				},
				yAxis: {
					type: 'value',
					name: '值',
					axisLabel: {
						margin: 10,
						color: "#fff",
						//backgroundColor: '#111'
						// color:"white"
					},
					axisLine: {
						lineStyle: {
							color: "#fff"
						}
					},
					axisTick: {
						length: 6,
						lineStyle: {
							color: "white"
						}
					}
				},
				series: []
			},

			analysis_chart: {
				title: {
					text: '数据分析曲线图',
					left: 'center', //center
					top: 5,
					textStyle: { //全局文字样式不包含它
						color: "white"
					},
					show: true
				},
				legend: {
					data: [],
					//left: 'left',
					left: '1%',
					top: 30,
					textStyle: { //全局文字样式不包含它
						color: "white"
					}
				},
				grid: {
					width: '92%',
					height: '78%',
					left: '4%',
					top: 85
				},
				textStyle: {
					color: "white"
					//textBorderColor:'#ff0000',
					//textBorderWidth:5,
				},
				toolbox: {
					show: true,
					right: 30,
					top: 5,
					iconStyle: {
						borderColor: "#fff"
					},
					feature: {
						dataZoom: {
							show: false
						},

						restore: {
							show: true,
							title: '还原'
						}, //刷新
						saveAsImage: {
							backgroundColor: '#fff',
							excludeComponents: ['toolbox', 'dataZoom'] //导出图片时不显示这两个组件
						}
					}
				},
				dataZoom: [{
					id: 'dataZoomX',
					type: 'slider',
					show: true,
					start: 0,
					end: 60,
					filterMode: 'filter',
					fillerColor: '#fff',
					backgroundColor: '#005353',
					handleStyle: {
						color: 'deepskyblue'
					},
					textStyle: {
						color: "white"
						//textBorderColor:'#ff0000',
						//textBorderWidth:5,
					},
					top: 'bottom'
				}

				],
				tooltip: {
					trigger: 'axis',
					textStyle: {
						align: 'left' //提示框文字的对齐方式
					}
				},
				// textStyle: {
				// 	//color: "white"
				// 	textBorderColor:'#ff0000',
				// 	textBorderWidth:5,
				// },
				xAxis: {
					data: [],
					//type:'category',  //结合下面的areaStyle形成曲线围成面积区域
					name: '时间',
					boundaryGap: false,
					axisLabel: {
						margin: 10,
						color: "#fff",
						//backgroundColor: '#111',
						showMinLabel: true,
						showMaxLabel: true
					},
					axisLine: {
						lineStyle: {
							color: "#fff"
						}
					},
					axisTick: {
						length: 6,
						lineStyle: {
							color: "white"
						},
						alignWithLabel: true
					}
				},
				yAxis: {
					type: 'value',
					name: '值',
					axisLabel: {
						margin: 10,
						color: "#fff"
						//backgroundColor: '#111'
						// color:"white"
					},
					axisLine: {
						lineStyle: {
							color: "#fff"
						}
					},
					axisTick: {
						length: 6,
						lineStyle: {
							color: "white"
						}
					}
				},
				series: []
			},
			dataset_option: {
				title: {
					text: '数据分析集合柱图',
					left: 'center', //center
					top: 5,
					textStyle: { //全局文字样式不包含它
						color: "white"
					},
					show: true
				},
				legend: {
					left: '1%',
					textStyle: { //全局文字样式不包含它
						color: "white"
					}
				},
				grid: {
					width: '92%',
					height: '78%',
					left: '4%',
					top: 80
				},
				tooltip: {
					textStyle: {
						align: 'left' //提示框文字的对齐方式
					}
				},
				dataset: {
					source: [
						['product', '2015', '2016', '2017'],
						['Matcha Latte', 43.3, 85.8, 93.7],
						['Milk Tea', 83.1, 73.4, 55.1],
						['Cheese Cocoa', 86.4, 65.2, 82.5],
						['Walnut Brownie', 72.4, 53.9, 39.1]
					]
				},
				toolbox: {
					show: true,
					right: 30,
					top: 5,
					iconStyle: {
						borderColor: "#fff"
					},
					feature: {
						dataZoom: {
							show: false
						},

						restore: {
							show: true,
							title: '还原'
						}, //刷新
						saveAsImage: {
							backgroundColor: '#fff',
							excludeComponents: ['toolbox', 'dataZoom'] //导出图片时不显示这两个组件
						}
					}
				},
				textStyle: {
					color: "white"
					//textBorderColor:'#ff0000',
					//textBorderWidth:5,
				},
				dataZoom: [{
					id: 'dataZoomX',
					type: 'slider',
					show: true,
					start: 0,
					end: 60,
					filterMode: 'filter',
					fillerColor: '#fff',
					backgroundColor: '#005353',
					handleStyle: {
						color: 'deepskyblue'
					},
					textStyle: {
						color: "white"
						//textBorderColor:'#ff0000',
						//textBorderWidth:5,
					},
					bottom: '1px'
				}

				],
				xAxis: {
					type: 'category',
					axisLabel: {
						margin: 10,
						color: "#fff"
						//backgroundColor: '#111'
						// color:"white"
					},
					axisLine: {
						lineStyle: {
							color: "#fff"
						}
					},
					axisTick: {
						length: 6,
						lineStyle: {
							color: "white"
						}
					}



				},
				yAxis: {
					axisLabel: {
						margin: 10,
						color: "#fff"
						//backgroundColor: '#111'
						// color:"white"
					},
					axisLine: {
						lineStyle: {
							color: "#fff"
						}
					},
					axisTick: {
						length: 6,
						lineStyle: {
							color: "white"
						}
					}

				},
				// Declare several bar series, each will be mapped
				// to a column of dataset.source by default.
				series: [{ type: 'bar', itemStyle: { color: "#BD2020" } }, { type: 'bar', itemStyle: { color: "#34c6ff" } }, { type: 'bar', itemStyle: { color: "#ffc34d" } }]
			},
			//数据报表曲ment线
			statement_chart: {
				title: {
					text: '数据报表曲线图',
					left: 'center', //center
					top: 5,
					textStyle: { //全局文字样式不包含它
						color: "white"
					}
				},
				legend: {
					data: [],
					//left: 'left',
					left: '1%',
					top: 30,
					textStyle: { //全局文字样式不包含它
						color: "white"
					}
				},
				grid: {
					width: '92%',
					height: '80%',
					left: '4%',
					top: '12%'
				},
				toolbox: {
					show: true,
					right: 30,
					top: 5,
					iconStyle: {
						borderColor: "#fff"
					},
					feature: {
						dataZoom: {
							show: false
						},
						// dataView: {
						// 	show:true,
						// 	readOnly: true
						// },
						// magicType: {    //这里是多数据点而且比较密集，不适合切换柱状图
						// 	type: ['line', 'bar']
						// },
						restore: {
							show: true,
							title: '还原'
						}, //刷新
						saveAsImage: {
							backgroundColor: '#fff',
							excludeComponents: ['toolbox', 'dataZoom'] //导出图片时不显示这两个组件
						}
					}
				},
				dataZoom: [{
					id: 'dataZoomX',
					type: 'slider',
					show: false,
					start: 0,
					end: 100,
					filterMode: 'filter',
					fillerColor: '#eee',
					backgroundColor: '#ccc',
					handleStyle: {
						color: 'red'
					},
					bottom: '2%'
				}

				],
				tooltip: {
					trigger: 'axis',
					textStyle: {
						align: 'left' //提示框文字的对齐方式
					}
				},
				textStyle: {
					color: "white"
					//textBorderColor:'#ff0000',
					//textBorderWidth:5,
				},
				xAxis: {
					data: [],
					//type:'category',  //结合下面的areaStyle形成曲线围成面积区域
					name: '时间',
					boundaryGap: false,
					axisLabel: {
						margin: 10,
						color: "#fff",
						//backgroundColor: '#111',
						showMinLabel: true,
						showMaxLabel: true
					},
					axisLine: {
						lineStyle: {
							color: "#fff"
						}
					},
					axisTick: {
						length: 6,
						lineStyle: {
							color: "white"
						},
						alignWithLabel: true
					}
				},
				yAxis: {
					type: 'value',
					name: '值',
					axisLabel: {
						margin: 10,
						color: "#fff"
						//backgroundColor: '#111'
						// color:"white"
					},
					axisLine: {
						lineStyle: {
							color: "#fff"
						}
					},
					axisTick: {
						length: 6,
						lineStyle: {
							color: "white"
						}
					}
				},
				series: []
			},
			ch_option: {
				//曲线渐变效果，需在echarts插件中加入visualMap(视觉映射)组件
				// visualMap: [{
				//         show:true,
				//         type: 'continuous',
				//         seriesIndex: 0,
				//         min: 0,
				//         max: 400
				// }],
				//backgroundColor:'red',//背景颜色,类似与‘dark’一样表示一种模式
				title: {
					text: '历史时段数据曲线图',
					left: '1%',
					top: 5,
					// textStyle: { //全局文字样式不包含它
					// 	color: "white"
					// }
				},
				grid: {
					width: '92%',
					height: '250px',
					left: '4%',
					top: 75
				},
				toolbox: {
					show: true,
					right: 30,
					iconStyle: {
						borderColor: "#aaa"
					},
					feature: {
						dataZoom: {
							show: false
						},
						dataView: {
							show: false,
							readOnly: true
						},
						magicType: {
							type: ['line', 'bar']
						},
						restore: {},
						saveAsImage: {
							backgroundColor: '#fff',
							excludeComponents: ['toolbox', 'dataZoom'] //导出图片时不显示这两个组件
						}
					}
				},
				dataZoom: [{
					id: 'dataZoomX',
					type: 'slider',
					show: true,
					start: 80,
					end: 100,
					filterMode: 'filter',
					fillerColor: '#eee',
					backgroundColor: '#ccc',
					handleStyle: {
						color: 'red'
					},
					top: '380px'
				}

				],
				tooltip: {
					trigger: 'axis'
				},
				// textStyle: {
				// 	color: "white"
				// },
				xAxis: {
					data: [],
					//type:'category',  //结合下面的areaStyle形成曲线围成面积区域
					name: '时间',
					boundaryGap: false,
					axisLabel: {
						margin: 10,
						showMinLabel: true,
						showMaxLabel: true
					},
					axisTick: {
						length: 6,
						// lineStyle: {
						// 	color: "white"
						// },
						alignWithLabel: true
					}
				},
				yAxis: {
					type: 'value',
					name: '值',
					axisLabel: {
						margin: 10
						// color:"white"
					},
					axisTick: {
						length: 6
						// lineStyle: {
						// 	color: "white"
						// }
					}
				},
				series: [{
					name: '',
					type: 'line',
					//areaStyle: {},    //结合上面的面的xAxis形成曲线围成面积区域
					data: [],
					markPoint: {
						data: [{
							type: 'max',
							name: '最大值'
						}, {
							type: 'min',
							name: '最小值'
						}]
					},
					markLine: {
						data: [{
							type: 'average',
							name: '平均值'
						}]
					},

					// itemStyle:{
					//    normal:{
					// 	  color:"#0b2c51"
					//    }
					// },

					// itemStyle: {
					//     normal: {
					//         //设置渐变效果
					//         color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
					//             offset: 0,
					//             color: "#ccc" //#90e0d0
					//         }, {
					//             offset: 1,
					//             color: "#0b2c51"
					//         }], false)
					//     }
					// },
					smooth: true
				}]
			},
			live_option: {
				title: {
					text: '实时同步数据曲线图',
					left: '1%',
					top: 10
					// textStyle: { //全局文字样式不包含它
					// 	color: "white"
					// }
				},
				grid: {
					width: '92%',
					height: '290px',
					left: '4%',
					top: 80,

				},
				// textStyle: {
				// 	color: "white"
				// },
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					data: [],
					name: '时间',
					boundaryGap: false,
					axisLabel: {
						margin: 10,
						showMinLabel: true,
						showMaxLabel: true
					},
					axisTick: {
						length: 6,
						// lineStyle: {
						// 	color: "white"
						// },
						alignWithLabel: true
					}
				},
				yAxis: {
					type: 'value',
					name: '值',
					axisLabel: {
						margin: 10
						// color:"white"
					},
					axisTick: {
						length: 6
						// lineStyle: {
						// 	color: "white"
						// }
					}
				},
				series: [{
					name: '',
					type: 'line',
					data: [],
					label: {
						show: true,
						formatter: '{c}'
					},
					markPoint: {
						data: [{
							type: 'max',
							name: '最大值'
						}, {
							type: 'min',
							name: '最小值'
						}]
					},
					markLine: {
						data: [{
							type: 'average',
							name: '平均值'
						}]
					},
					smooth: true
				}]
			},
			//示功图曲线(双数值图)
			power_option: {
				title: {
					text: '示功图',
					left: '1%',
					top: 10
					// textStyle: { //全局文字样式不包含它
					// 	color: "white"
					// }
				},
				grid: {
					width: '90%',
					height: '360px',
					left: '6%',
					top: 80,

				},
				// textStyle: {
				// 	color: "white"
				// },
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					name: "X"
				},
				yAxis: {
					name: "Y"
				},
				series: [{
					name: '',
					type: 'line',
					data: [

					],
					markPoint: {
						data: [{
							type: 'max',
							name: '最大值'
						}, {
							type: 'min',
							name: '最小值'
						}]
					},
					markLine: {
						data: [{
							type: 'average',
							name: '平均值'
						}]
					},
					smooth: true
				}, {
					name: '',
					type: 'line',
					data: [

					],
					markPoint: {
						data: [{
							type: 'max',
							name: '最大值'
						}, {
							type: 'min',
							name: '最小值'
						}]
					},
					markLine: {
						data: [{
							type: 'average',
							name: '平均值'
						}]
					},
					smooth: true
				}]
			}
		}
	},
	components: {
		SensorRealData,
		SensorVarData
	},
	watch: {
		filterText(val) {
			this.$refs.tree.filter(val);
		},
    //解决数据报表/数据分析/历史数据中表格固定列后出现的错位问题
    "tableData":{
    	handler() {
    		this.$nextTick(()=>{
    			this.$refs.reportTable.doLayout();
    		})
    	},
    	deep:true
    },
    "analysisData":{
    	handler() {
    		this.$nextTick(()=>{
    			this.$refs.analysisTable.doLayout();
    		})
    	},
    	deep:true
    },
    "historyData":{
    	handler() {
    		this.$nextTick(()=>{
    			this.$refs.historyTable.doLayout();
    		})
    	},
    	deep:true
    }
	},

	// beforeRouteEnter (to, from, next) {
	//     //不可以访问this;
	// 	//console.log(from.name);
	// 	next(vm => {
	// 	   vm.fromPage=from.name;
	// 	   vm.fromOrder = from.meta.order;
	// 	   console.log(vm.fromPage);
	// 	})
	// },

	created() {
		var that = this;
		this.site_name = localStorage.getItem("site_name") || "能耗检测系统";
    this.urlLogo=(this.$baseurl + localStorage.getItem("loginLogo")) || "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/ykwdlogo.png";
		this.nowMenu = JSON.parse(localStorage.getItem("monitorMenu"));
		//console.log(this.nowMenu);
		this.fromPage = this.$route.query.fromPage;
		this.fromOrder = this.$route.query.fromOrder;
		this.getProduct();
		this.isFirst = true;
		this.isShow = Number(localStorage.getItem("productShow")) == 1 ? true : false;
		localStorage.removeItem('from');
		this.sysName = localStorage.getItem("compName");
		if (this.Socket) {
			this.Socket.close();
		}
		this.form.value = [that.getNowFormatDate(), that.getNowFormatDate()];
		this.historyForm.value = [that.getNowFormatDate(), that.getNowFormatDate()];
		this.alarmForm.value = [that.getNowFormatDate(), that.getNowFormatDate()];
		this.operForm.value = [that.getNowFormatDate(), that.getNowFormatDate()];
		this.tableForm.value = that.getNowFormatDate();
		this.analysisForm.value = [that.getNowFormatDate(), that.getNowFormatDate()];
		//this.lineForm.value = [that.getNowFormatDate(), that.getNowFormatDate()];
		//this.form.type=this.types[0].value;
		//设备轨迹默认时间范围当日0点到当前时间
		//this.mapForm.time_range = [that.getNowFormatDate() + " 00:00:00", that.getNowTime()];
	},

	mounted() {
		var that = this;
		//console.log(this.getNowHour());
		//console.time('initialize');
		//this.$refs.page.style.height = window.innerHeight + 'px';

		if (window.screen.height == 1440) {
			this.history_chart.grid.height = '85%';
			this.analysis_chart.grid.height = '85%';
		} else if (window.screen.height == 900) {
			this.history_chart.grid.height = '75%';
			this.analysis_chart.grid.height = '75%';
		} else if (window.screen.height == 768) {
			this.history_chart.grid.height = '70%';
			this.analysis_chart.grid.height = '70%';
		} else if (window.screen.height == 640) {
			this.history_chart.grid.width = '90%';
			this.history_chart.grid.height = '64%';
			this.history_chart.grid.top = 105;
			this.analysis_chart.grid.width = '90%';
			this.analysis_chart.grid.height = '64%';
			this.analysis_chart.grid.top = 105;
		}

		setTimeout(function () {
			that.getFirstDefault();
			// that.optionNodes=document.querySelectorAll(".el-tree-node__content");
			// //console.log(that.optionNodes);
			// for(let e=0,len2=that.optionNodes.length;e<len2;e++){
			// 	//console.log(that.optionNodes[e].children[0].classList);
			// 	if(that.optionNodes[e].children[1].innerText==that.optionName){

			// 		that.optionNodes[e].children[0].style.color="#409eff";
			// 		that.optionNodes[e].children[1].style.color="#409eff";
			// 	}else{
			// 		that.optionNodes[e].children[0].style.color="#222";
			// 		that.optionNodes[e].children[1].style.color="#222";
			// 	}
			// 	//let classAll=Array.from(that.optionNodes[e].children[0].classList);
			// 	//判断是否是叶子节点，以隐藏前面的三角图标
			// 	// if(classAll.indexOf('is-leaf')>=0){
			// 	// 	//直接去掉就没有了退格，所以做隐去处理；
			// 	// 	//that.optionNodes[e].children[0].removeAttribute('class','el-tree-node__expand-icon');
			// 	// 	that.optionNodes[e].children[0].style.color="transparent";
			// 	// 	that.optionNodes[e].children[0].style.marginLeft="-10px";

			// 	// }
			// }
			that.fullScreenThree();
		}, 1000)

		this.getToken();
		//console.timeEnd('initialize');
		this.tokenTimer = setInterval(function () {
			that.getToken();
		}, 10200000);
	},

	methods: {
		fullScreenThree() {
			var that = this;
			//this.screenThree =
			//document.fullScreen ||
			//	document.mozFullScreen ||
			//	document.msFullScreen ||
			//	document.webkitIsFullScreen;
			var content = document.documentElement;
			if (!this.screenThree) {
				//进入全屏,多重短路表达式
				(content.requestFullscreen && content.requestFullscreen()) ||
					(content.mozRequestFullScreen && content.mozRequestFullScreen()) ||
					(content.webkitRequestFullscreen &&
						content.webkitRequestFullscreen()) ||
					(content.msRequestFullscreen && content.msRequestFullscreen());
				this.screenThree = true;
				// that.$message({
				// 	type: "info",
				// 	dangerouslyUseHTMLString: true,
				// 	duration: 5000,
				// 	offset: 400,
				// 	message: "<p style='color:#222;'>如需还原请点击<span style='color:red;'>全屏切换</span>按钮,如需进入浏览器全屏请按键盘<span style='color:red;'>ESC</span>键！</p>"
				// });
			} else {
				//CancelFullScreen?document.mozCancelFullScreen():
				document.exitFullscreen ?
					document.exitFullscreen() :
					document.mozCancelFullScreen ?
						document.mozCancelFullScreen() :
						document.msExitFullScreen ?
							document.msExitFullScreen() :
							document.webkitExitFullscreen ?
								document.webkitExitFullscreen() :
								"";
				this.screenThree = false;
			}
		},

		getNowTime() {
			//输出格式为：年-月-日 时:分:秒
			//var a = ["日", "一", "二", "三", "四", "五", "六"];
			var date = new Date(); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
			var s = date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds();
			// var wk = date.getDay();
			// var wks = "星期" + a[wk] + "•";
			// return Y + M + D + wks + h + m + s;
			return Y + M + D + h + m + s;
		},
		//获取当前小时
		getNowHour() {
			var date = new Date();
			return date.getHours();
		},

		//获取当前年月日或前几日或后几日的日期并转换格式
		//days   推延天数，before下days=1,就是当日;after下days=0就是当日
		//type   before向前推，after向后推
		getBeforeAfterDate(days = 1, type = "after") {
			//时间差ms，before下包含当日，所以要减1，不然多一天
			var times = type == "before" ? (days - 1) * 3600 * 24 * 1000 : days * 3600 * 24 * 1000;
			var today = new Date().getTime();
			var date = type == "before" ? new Date(today - times) : new Date(today + times);
			var seperator1 = "-";
			// var seperator2 = ":";
			var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
			var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
			//var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
			var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
			return currentdate;
		},

		//默认月份，三个月的算法
		getThreeMonth() {
			const end = new Date();
			var endY = end.getFullYear() + '-';
			var endM = (end.getMonth() + 1 < 10 ? '0' + (end.getMonth() + 1) : end.getMonth() + 1);
			const start = new Date();
			var startY = start.getFullYear() + '-';
			var startM = (start.getMonth() - 1 < 10 ? '0' + (start.getMonth() - 1) : start.getMonth() - 1);
			//return startY+startM+"~"+endY+endM;
			return [startY + startM, endY + endM];
		},

		//项目或公共函数
		getProduct() {
			var that = this;
			this.options = [];
			this.$http({
				method: 'post',
				async: false,
				url: 'api/product/all',
				data: {}
			}).then(res => {
				//console.log(res.data.data)
				if (res && res.data.result == "success") {
					for (let i = 0, len = res.data.data.length; i < len; i++) {
						if (res.data.data[i].equips_count || res.data.data[i].views_count || res.data.data[i]
							.cameras_count) {
							let option = {
								value: res.data.data[i].id,
								label: res.data.data[i].product_name,
								equips_count: res.data.data[i].equips_count,
								views_count: res.data.data[i].views_count,
								cameras_count: res.data.data[i].cameras_count
							}
							this.options.push(option);
						}

					}
					if (this.options.length) {
						this.optionId = this.options[0].value;
            this.showViewTab = Number(this.options[0].views_count) > 0 ? true : false;
            this.showCameraTab = Number(this.options[0].cameras_count) > 0 ? true : false;
						console.log(this.optionId);
						this.optionName = this.options[0].label;
						localStorage.setItem("optionId", that.optionId);
					}
				}
			}).catch(error => {
				console.log(error);
			});

		},

		//自定义菜单由项目控制改为用户控制之后
		getFirstDefault() {
			for (let i = 0, len = this.nowMenu.length; i < len; i++) {
				if (this.nowMenu[i].isIndex == 1) {
					this.topTab = this.nowMenu[i].key;
					this.menuActive = this.nowMenu[i].key;
					break;
				}
			}
			if (this.topTab == 'view') {
				this.getViewAll(this.optionId);
			}
			this.getEquip(this.optionId);
		},

		getDefaultTab() {

		},

		filterNode(value, data) {
			if (!value) return true;
			return data.label.indexOf(value) !== -1;
		},

		changeColor(event) {
			console.log(event);
		},
		// async handleNodeClick(data, node, event) {
		// 	var that = this;
		// 	this.optionId = data.value;
		// 	localStorage.setItem("optionId", data.value);
		// 	this.isFirst = false;
		// 	// var sibling = event.$el.parentNode.children;
		// 	// for (var i = 0; i < sibling.length; i++) {
		// 	// 	sibling[i].style.color = "#222";
		// 	// }
		// 	// event.$el.style.color = "#409eff";
		// 	this.devices = [];
		// 	this.lookAll = false;
		// 	if (this.Socket) {
		// 		this.Socket.close();
		// 		clearInterval(that.timer);
		// 	}
		// 	if (this.map) {
		// 		this.map.destroy();
		// 	}
		// 	this.historyForm.sgroup_id = 0;
		// 	this.historyForm.sensorIds = [];
		// 	this.analysisForm.sgroup_id = '';
		// 	this.analysisData = [];
		// 	this.analysisFields = [];
		// 	this.analysisVarSensors = [];
		// 	this.analysisForm.sensorIds = [];
		// 	this.historyType = 'table';
		// 	this.varSensors = [];
		// 	//this.mapForm.show_type = 1;
		// 	//this.mapForm.time_range = [that.getNowFormatDate() + " 00:00:00", that.getNowTime()];
		// 	//this.productInfo.hasImage = data.hasImage;
		// 	this.showViewTab = Number(data.views_count) > 0 ? true : false;
		// 	this.showCameraTab = Number(data.cameras_count) > 0 ? true : false;
		// 	await this.getEquip(this.optionId);
		// 	//this.getEquipAll(this.optionId);
		// 	this.alarmForm.device = [];
		// 	this.operForm.device = [];
		// 	this.lineForm.device = [];

		// 	this.chooseTab(that.topTab);

		// 	for(let i=0;i<this.optionNodes.length;i++){
		// 		this.optionNodes[i].children[0].style.color="#222";
		// 		this.optionNodes[i].children[1].style.color="#222";
		// 		let classAll=Array.from(that.optionNodes[i].children[0].classList);

		// 	}
		// 	let classAll=Array.from(event.$el.firstElementChild.children[0].classList);
		// 	event.$el.firstElementChild.children[0].style.color="#409eff";
		// 	event.$el.firstElementChild.children[1].style.color="#409eff";

		// },

		showOption() {
			var that = this;
			console.log(this.optionList);
			this.optionList = !this.optionList;
			setTimeout(function () {
				that.optionList = false;
			}, 5000)
		},
		showOption1() {
			var that = this;
			console.log(this.optionList);
			this.optionList1 = !this.optionList1;
			setTimeout(function () {
				that.optionList1 = false;
			}, 5000)
		},
		change_show_icon() {
			this.show_icon = !this.show_icon
		},


		async changeOption(item, e) {
			var that = this;
			//console.log(item);
			this.optionId = item.value;
			that.optionList = false;
			that.optionList1 = false;
      this.showViewTab = Number(item.views_count) > 0 ? true : false;
      this.showCameraTab = Number(item.cameras_count) > 0 ? true : false;
			localStorage.setItem('optionId', item.value);
			console.log(this.optionId);
			this.optionName = item.label;
			this.isFirst = false;
			this.devices = [];
			//实时数据默认矿区下全部设备
			this.lookAll = true;
			//this.deviceAll=true;
			if (this.Socket) {
				this.Socket.close();
				clearInterval(that.timer);
			}
			this.historyForm.sgroup_id = 0;
			this.historyForm.sensorIds = [];
			this.historyType = 'table';
			this.varSensors = [];
			//this.analysisForm.sgroup_id = '';
			this.analysisData = [];
			this.analysisFields = [];
			//this.analysisVarSensors = [];
			//this.analysisForm.sensorIds = [];
			this.alarmForm.device = [];
			this.operForm.device = [];

			await this.getEquip(this.optionId);
			//this.lineForm.device = [];
			if (this.topTab != "data") {
				setTimeout(function () {
					that.chooseTab(that.topTab);
				}, 1000);
			}
		},

		// isDisable(data,node){
		// 	return data.disabled;
		// },
		//根据浏览器是否有书签栏，修正容器尺寸
		changeContainSize(tab, time) {
			var that = this;
			if (tab == 'data') {
				setTimeout(function () {
					var oldHeight = that.$refs.deviceData.offsetHeight;
					that.$refs.deviceData.style.cssText += ";height:" + (oldHeight + 34) +
						"px!important";

				}, time)
			}
			if (tab == 'view') {
				setTimeout(function () {
					var oldHeight = that.$refs.mainIframe.offsetHeight;
					that.$refs.mainIframe.style.cssText += ";height:" + (oldHeight + 30) +
						"px!important";
					//that.$refs.mainIframe.style.height = (oldHeight + 34) +'px';
				}, time)
			}
			if (tab == 'map') {
				setTimeout(function () {
					var oldHeight = that.$refs.content.offsetHeight;
					var newHeight = oldHeight + 30;
					that.$refs.content.style.cssText += ";height:" + newHeight +
						"px!important";

				}, time)
			}
			if (tab == 'image') {
				setTimeout(function () {
					var oldHeight = that.$refs.productImage.offsetHeight;
					var newHeight = oldHeight + 30;
					that.$refs.productImage.style.cssText += ";height:" + newHeight +
						"px!important";

				}, time)
			}
		},

		//实时报警全局函数,这里只用于更换图标；
		// getAllAlarmSocket() {
		// 	var that = this;
		// 	//console.log("homeAlarm");
		// 	this.alarmSocket = new WebSocket(this.wsUrl);
		// 	if (this.alarmSocket.readyState != WebSocket.OPEN) {
		// 		this.alarmSocket.onopen = function() {
		// 			var pingData = {
		// 				action: "alarm",
		// 				data: {
		// 					user_id: localStorage.getItem('at_userId'),
		// 					token: localStorage.getItem("attoken")
		// 				}
		// 			};
		// 			that.alarmSocket.send(JSON.stringify(pingData));
		// 			that.platformAlarmTimer = setInterval(function() {
		// 				that.alarmSocket.send(JSON.stringify(pingData));
		// 			}, 30000);
		// 			console.log('连接成功')
		// 		};
		// 	};
		// 	this.alarmSocket.onerror = this.onAlarmError;
		// 	this.alarmSocket.onmessage = this.onAlarmMessage;
		// },

		// onAlarmError(e) {
		// 	var that = this;
		// 	//console.log("连接失败，尝试重连")
		// 	this.alarmSocket.close();
		// 	clearInterval(that.platformAlarmTimer);
		// 	//this.getALLAlarm();
		// },


		// onAlarmMessage(msg) {
		// 	var that = this;
		// 	var messageData = JSON.parse(msg.data);
		// 	//console.log(messageData);
		// 	if (messageData.result == "success" && this.isObject(messageData.data)) {
		// 		var liveDatas = messageData.data;
		// 		//console.log(liveDatas);
		// 		var icon = "";
		// 		if (liveDatas.status == 'alarm') { //报警
		// 			icon = "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/alarmOne.gif";
		// 		} else if (liveDatas.status == 'connect' || liveDatas.status == 'online') {
		// 			icon = "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/online.png";
		// 		} else if (liveDatas.status == 'disconnect' || liveDatas.status == 'powerdown') {
		// 			icon = "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/down.png";
		// 		}
		// 		for (let i = 0, len = this.equipdata.length; i < len; i++) {
		// 			if (this.equipdata[i].id == liveDatas.equip_id) {
		// 				this.equipdata[i].stateIcon = icon;
		// 				for (let m = 0, len2 = this.markers.length; m < len2; m++) {
		// 					if (this.markers[m].w.label.content == liveDatas.equip_name) {
		// 						this.markers[m].setIcon(new AMap.Icon({
		// 							size: [26, 32],
		// 							imageSize: [26, 32],
		// 							image: icon
		// 						}));
		// 						break;
		// 					}
		// 				}
		// 				break;
		// 			}
		// 		}
		// 	} else {
		// 		console.log(messageData.message);
		// 	}
		// },

		//停止所有视频函数
		stopVideo() {
			if (this.player1) {
				this.player1.stop();
			}
			if (this.player2) {
				this.player2.stop();
			}
			if (this.player3) {
				this.player3.stop();
			}
			if (this.player4) {
				this.player4.stop();
			}
		},

		chooseTab(tab) {
			var that = this;
			if (tab != "data" && this.Socket) {
				this.Socket.close();
				clearInterval(that.timer);
			}
			if (tab != "map" && this.alarmSocket) {
				this.alarmSocket.close();
				clearInterval(that.platformAlarmTimer);
			}
			if (tab != 'video') {
				this.stopVideo();
			}
			this.myChart = null;
			clearInterval(that.powerTimer);
			this.power_option.series[0].data = [];
			this.myPowerChartLive = null;

			if (this.devices.length) {
				switch (tab) {
					case 'data':
						if (this.lookAll) {
							this.getAllLiveData();
						} else {
							this.getManyLiveData(this.form.device);
						}
						break;
					case 'view':
						this.getViewAll(this.optionId);
						break;
					case 'video':
						this.getCameraAll(this.optionId);
						setTimeout(function () {
							that.showCamera();
						}, 1000)
						break;
					case 'history':
						this.queryParams.pageNo = 1;
						if (this.historyForm.deviceType == 1 && this.historyForm.groupsCount > 1) {
							this.getHistory(1, this.queryParams.pageSize, this.historyForm.device, this.historyForm
								.sgroup_id, this.historyForm.sensorIds.join(','), this.historyForm.value.join('~'));
						} else {
							this.getHistory(1, this.queryParams.pageSize, this.historyForm.device, 0, this.historyForm
								.sensorIds.join(','), this.historyForm.value.join('~'));
						}
						break;
					case 'alarm':
						this.queryParams_2.pageNo = 1;
						this.getAlarm(1, that.queryParams_2.pageSize, [], that.alarmForm.value.join('~'));
						break;
					case 'log':
						this.queryParams_3.pageNo = 1;
						this.getLogs(1, that.queryParams_3.pageSize, 0, that.operForm.value.join('~'));
						break;
					case 'statement':
						this.getAnalysisTable(this.optionId);
						break;
					case 'analysis':
						if (this.analysisForm.deviceType == 1 && this.analysisForm.groupsCount > 1) {
							this.getAnalysisSensorsAll(this.analysisForm.sgroup_id);
						} else {
							this.getAnalysisSensorsAll(0);
						}
						break;
					case 'power':
						this.getPower();
						break;
					case 'connect':
						this.getLines(1, that.queryParams_4.pageSize, 0, that.lineForm.value.join('~'));
						break;
					case 'map':
						//this.mapForm.show_type = 1;
						//this.mapForm.time_range = [that.getNowFormatDate() + " 00:00:00", that.getNowTime()];
						this.getEquipMap(this.optionId, '', '', true);
						//this.getAllAlarmSocket();
						break;
					// case 'image':
					// 	this.showImage(this.optionId);
					// 	break;

				}
			} else {
				if (tab == 'map') {
					this.showMap();
				} else if (tab == 'video') {
					this.getCameraAll(this.optionId);
					setTimeout(function () {
						that.showCamera();
					}, 1000);
				} else if (tab == 'view') {
					this.getViewAll(this.optionId);

				} else if (tab == 'statement') {
					this.getAnalysisTable(this.optionId);
				}
			}
			// if (window.screen.availHeight - window.innerHeight<=80) {
			// 	this.changeContainSize(tab, 1000);
			// }

		},

		beforeLeave(newTab, oldTab) {
			//this.topTab=newTab;
			//this.chooseTab(this.topTab);
			if (oldTab == 'map') {
				this.$notify.closeAll();
			}
		},

		mainClick(el) {
			this.topTab = el.name;
			this.chooseTab(this.topTab);
		},

		getNowFormatDate() { //获取当前年月日
			var date = new Date();
			var seperator1 = "-";
			// var seperator2 = ":";
			var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
			var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
			var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
			var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate

			return currentdate;
		},

		goExit(type) {
			var that = this;
			this.willExit = true;
			//document.removeEventListener("fullscreenchange",that.stopEsc,false);
			//var content = this.$refs.page;
			clearInterval(that.timer);
			if (this.Socket) {
				this.Socket.close();
				this.Socket.onerror = null;
			}
			localStorage.setItem("from", "mainData");
			this.showView = false;
			this.$message.closeAll();
			this.$notify.closeAll();
			if (this.screenThree || this.mapFullscreen || this.isFullViewscreen) {
				document.exitFullscreen ? document.exitFullscreen() :
					document.mozCancelFullScreen ? document.mozCancelFullScreen() :
						document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
				this.mapFullscreen = false;
				this.isFullViewscreen = false;
				this.screenThree = false;
			}
			if (type == 'control') {
				if (this.fromPage == 'Login' || this.fromPage == 'showScreenMap' || this.fromPage == 'largeScreenMap' || !this.fromPage) {
					this.$router.push({
						path: '/device',
						name: 'device',
						component: 'device'
					})
					localStorage.setItem("indexPath", '7-1');
				} else {
					this.$router.push({
						path: '/' + that.fromPage,
						name: that.fromPage,
						component: that.fromPage
					})
					localStorage.setItem("indexPath", this.fromOrder);
				}
			} else {
				this.$router.push({
					name: 'Login',
					path: '/',
					component: 'Login'
				});
				localStorage.clear();
			}
		},

		showOption2() {
			var that = this;
			console.log(this.optionList2);
			this.optionList2 = !this.optionList2;
			setTimeout(function () {
				that.optionList2 = false;
			}, 5000)
		},


		goScreenTotal() {


		},
		// 去哪个大屏
		changeOption2(item, e) {
			console.log(item, e)
			let n = item.value
			// 监控大屏
			if (n == 1) {
				this.$router.push({
					path: '/largeScreen',
					name: 'largeScreen',
					component: 'largeScreen'
				});
			} else if (n == 2) {
				this.$router.push({
					path: '/largeScreenNew',
					name: 'largeScreenNew',
					component: 'largeScreenNew'
				});
			} else if (n == 3) {
				this.$router.push({
					path: '/largeScreenMap',
					name: 'largeScreenMap',
					component: 'largeScreenMap'
				});
			}
			this.stopVideo();
		},
		getEquipAll(id) {
			var that = this;
			this.alarmEquips = [];
			//this.$notify.closeAll();
			this.$http({
				method: 'post',
				url: 'api/equip/all',
				data: {
					"product_id": id,
					"run_mode": 1,
					"is_alarm": 1
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					//console.log(res.data.data);
					if (res.data.data.length) {
						for (let i = 0, len = res.data.data.length; i < len; i++) {
							if (res.data.data[i].is_on == 1 && res.data.data[i].is_alarm == 1) {
								this.alarmEquips.push(res.data.data[i].equip_name);
							}
						}

					}
					// if (this.alarmEquips[0]) {
					// 	this.alarmStr = "报警提示:当前项目以下设备:" + this.alarmEquips.join(',') + "正在报警，请及时处理!";
					// 	var msg = new SpeechSynthesisUtterance(that.alarmStr);
					// 	if(localStorage.getItem("alarmVoice")=="true"){
					// 		window.speechSynthesis.speak(msg);
					// 	}
					// 	this.$notify({
					// 		title: '当前项目报警提示:',
					// 		dangerouslyUseHTMLString: true,
					// 		customClass: 'notice',
					// 		message: '<div style="display:block;text-align:left;width:200px;height:auto;line-height:20px;margin:0 auto;padding-right:10px;text-indent:0;padding-left:0;color:#666;">以下设备:</br><span style="color:#d92027;font-weight:700;">' +
					// 			that.alarmEquips.join('</br>') + '</span></br>正在报警，请及时处理!<span style="display:block;color:deepskyblue;cursor:pointer;">点击开启/关闭语音</span></div>',
					// 		duration:6000,
					// 		position:'bottom-left',
					// 		offset: 10,
					// 		onClose: function() {
					// 			//window.speechSynthesis.cancel(msg);
					// 		},
					// 		onClick:function() {
					// 			if(that.isPlay){
					// 			    window.speechSynthesis.cancel(msg);
					// 				localStorage.setItem("alarmVoice",false);
					// 			}else{
					// 				window.speechSynthesis.speak(msg);
					// 				localStorage.setItem("alarmVoice",true);
					// 				//window.speechSynthesis.resume();
					// 			}
					// 			that.isPlay=!that.isPlay;
					// 		},
					// 	});
					// 	//that.alarmStr = "当前项目以下设备:" + that.alarmEquips.join(',') + "正在报警，请及时处理!";
					// } else {
					// 	//that.alarmStr = "该项目下暂无设备报警!"
					// }
				}

			}).catch(error => {

				console.log(error);
			});
		},

		getEquip(id) {
			var that = this;
			this.devices = [];
			this.$http({
				method: 'post',
				url: 'api/equip/all',
				data: {
					"product_id": id,
					"run_mode": 1,
					"user_id": localStorage.getItem("at_userId")
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					if (res.data.data.length) {
						for (let i = 0, len = res.data.data.length; i < len; i++) {
							let device = {
								value: res.data.data[i].id,
								label: res.data.data[i].equip_name,
								type: res.data.data[i].type,

								groupsCount: res.data.data[i].groups_count
								//disabled:res.data.data[i].slaves_count?false:true
							}
							this.devices.push(device);
						}
						//console.log(this.devices);
					} else { //这是判断只有组态没有设备的情况
						this.equipDataTree = [];
						this.form.device = '';
						this.$refs.deviceData.innerHTML = "";
						this.cameras = [];
						this.historyData = [];
						this.fields = [];
						this.historyForm.device = '';
						this.analysisData = [];
						this.analysisFields = [];
						this.analysisForm.device = '';
						this.alarmData = [];
						this.alarmForm.device = [];
						this.operData = [];
						this.operForm.device = [];
						this.lineData = [];
						this.lineForm.device = [];
						return false;
					}
					if (this.devices[0]) {
						this.form.device = [that.devices[0].value];
						if (this.topTab == 'data') {
							//this.getManyLiveData(this.form.device);
							//设备监控初始赋值,
							//2022年4月28日改为全部
							this.getAllLiveData();
						}

						//历史数据初始赋值
						this.historyForm.device = this.devices[0].value;
						this.historyForm.deviceType = this.devices[0].type;
						this.historyForm.groupsCount = this.devices[0].groupsCount;
						//数据分析初始赋值
						this.analysisForm.device = this.devices[0].value;
						this.analysisForm.deviceType = this.devices[0].type;
						this.analysisForm.groupsCount = this.devices[0].groupsCount;
						if (this.devices[0].type == 1 && this.devices[0].groupsCount > 1) {
							//提前获取历史数据所需的分组数据；
							this.getHistoryGroups(this.historyForm.device);
							//提前获取数据分析所需的分组数据；
							this.getAnalysisGroups(this.analysisForm.device);
						}
						//项目可配菜单后添加
						if (this.topTab != 'data' && this.topTab != 'view' && this.isFirst) {
							this.chooseTab(this.topTab)
						}
						return true;

					} else {
						this.form.device = "暂无设备";
						return false;
					}
				}

			}).catch(error => {
				console.log(error);
				return false;
			});

		},

		//以下是设备监控相关函数
		getSensors(id) {
			var that = this;
			this.Socket = new WebSocket(this.wsUrl);
			if (this.Socket.readyState != WebSocket.OPEN) {
				this.Socket.onopen = function () {
					var pingData = {
						action: "ping",
						data: {
							user_id: localStorage.getItem('at_userId'),
							equip_id: id.join(','),
							token: localStorage.getItem("attoken")
						}
					};

					that.Socket.send(JSON.stringify(pingData));
					that.refreshManyDeviceData(id);
					that.timer = setInterval(function () {
						that.Socket.send(JSON.stringify(pingData));
					}, 30000);

					console.log('连接成功')
				};
			};
			this.Socket.onerror = this.onError;
			this.Socket.onmessage = this.onMessage;
		},

		refreshManyDeviceData(id) {
			if (!id) {
				this.$refs.deviceData.innerHTML = "";
				return false;
			}
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/equip/refresh',
				data: {
					"id": id.join(','),
					"mode": 'all'
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					console.log("数据刷新成功")
				} else {
					//阻止自动刷新的失败提示；
					this.$message.closeAll();
				}
			}).catch(error => {

				console.log(error)
			});
		},

		refreshOneDeviceData(id, type) {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/equip/refresh',
				data: {
					"id": id,
					"mode": type == 1 ? 'real' : 'vars'
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					this.$message({
						message: '此设备数据已刷新!',
						type: 'info',
						duration: 2000,
						offset: 350,
						center: true
					});
					//console.log("数据刷新成功")
				}
			}).catch(error => {

				console.log(error)
			});
		},

		refreshOneSlaveData(id, slave, type) {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/equip/refresh',
				data: {
					"id": id,
					"slave_id": slave,
					"mode": type == 1 ? 'real' : 'vars'
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					console.log("数据刷新成功")
				}
			}).catch(error => {

				console.log(error)
			});
		},

		refreshFun(second = 1000, item, type = 1) {
			var that = this;
			setTimeout(function () {
				if (item.slave_id) {
					that.refreshOneSlaveData(item.equip_id, item.slave_id, type);
				} else {
					that.refreshOneDeviceData(item.equip_id, type);
				}
			}, second);
		},

		//获取当前选择的设备的结构树
		getManyLiveData(devices) {
			var that = this;
			if (!devices.length) {
				this.$message({
					message: '你还没有选择设备，请先选择!',
					type: 'error',
					duration: 2000,
					offset: 300,
					center: true
				});
				return
			}
			this.equipDataTree = [];
			this.allExpand = true;
			if (this.Socket) {
				this.Socket.close();
				clearInterval(that.timer);
			}
			this.$http({
				method: 'post',
				url: 'api/equip/batchView',
				data: {
					"id": devices.join(','),
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					this.equipDataTree = Array.from(res.data.data);
					for (let i = 0, len = this.equipDataTree.length; i < len; i++) {
						//this.equipDataTree[i].signal=24;
						this.$set(this.equipDataTree[i], 'visible', true);
						this.$set(this.equipDataTree[i], 'signalIcon', '../../static/signalNo.png');
						//v5.3信号signal共有31个指数，分4段
            if(this.equipDataTree[i].signal>=1){
              if (this.equipDataTree[i].signal >= 1 && this.equipDataTree[i].signal <= 7) {
                this.equipDataTree[i].signalIcon = '../../static/signalGreenOne.png';
              } else if (this.equipDataTree[i].signal >= 8 && this.equipDataTree[i].signal <= 14) {
                this.equipDataTree[i].signalIcon = '../../static/signalGreenTwo.png';
              } else if (this.equipDataTree[i].signal >= 15 && this.equipDataTree[i].signal <= 21) {
                this.equipDataTree[i].signalIcon = '../../static/signalGreenThree.png';
              } else if (this.equipDataTree[i].signal >= 22) {
                this.equipDataTree[i].signalIcon = '../../static/signalGreenFour.png';
              }
            //v5.4是负值，-113到-51
            }else if(this.equipDataTree[i].signal<0){
              if (this.equipDataTree[i].signal >= -113 && this.equipDataTree[i].signal <= -99) {
                this.equipDataTree[i].signalIcon = '../../static/signalGreenOne.png';
              } else if (this.equipDataTree[i].signal >= -98 && this.equipDataTree[i].signal <= -84) {
                this.equipDataTree[i].signalIcon = '../../static/signalGreenTwo.png';
              } else if (this.equipDataTree[i].signal >= -83 && this.equipDataTree[i].signal <= -69) {
                this.equipDataTree[i].signalIcon = '../../static/signalGreenThree.png';
              } else if (this.equipDataTree[i].signal >= -68) {
                this.equipDataTree[i].signalIcon = '../../static/signalGreenFour.png';
              }



            }
						if (this.equipDataTree[i].type == 1 && this.equipDataTree[i].groups_count > 1) {
							var groups = [{
								id: 0,
								sgroup_name: '全部'
							}, ...that.equipDataTree[i].groups];
							this.$set(this.equipDataTree[i], 'groupList', groups);
							//this.equipDataTree[i].slaves.unshift({id:0,slave_name:'全部'});
							this.$set(this.equipDataTree[i], 'oneDeviceForm', {
								sgroup_id: 0,
								data_type: that.dataTypes[0].value
							})
							this.equipDataTree[i].oneDeviceForm.sgroup_id = this.equipDataTree[i].groupList[0]
								.id;
						} else {
							this.$set(this.equipDataTree[i], 'oneDeviceForm', {
								sgroup_id: '',
								data_type: that.dataTypes[0].value
							})
						}

					}
					this.equipDataTree[0].visible = true;
					this.already = true;
					this.getSensors(devices);
					//console.log(this.equipDataTree);
				}
				// console.log(that.pointdata[0].icon)
			}).catch(error => {

				console.log(error)
			});
		},

		//获取所有设备的数据结构
		getAllLiveData() {
			this.lookAll = true;
			this.form.device = [];
			var devices = [];
			for (let i = 0, len = this.devices.length; i < len; i++) {
				devices.push(this.devices[i].value)
			}
			this.getManyLiveData(devices);
			//this.deviceAll = true;
			//this.allExpand = all;

		},

		// changeDataDevice(devices){
		// 	this.deviceAll = devices.length==this.devices.length?true:false;
		// },

		showAllDevice(allShow) {
			this.allExpand = !this.allExpand;
			for (let i = 0, len = this.equipDataTree.length; i < len; i++) {
				this.equipDataTree[i].visible = allShow;
			}
		},

		showOneDevice(index, oneShow) {
			this.equipDataTree[index].visible = oneShow;
			if (this.equipDataTree.every(function (item) {
				return item.visible == true;
			})) {
				this.allExpand = true;
			} else if (this.equipDataTree.every(function (item) {
				return item.visible == false;
			})) {
				this.allExpand = false;
			}
			this.$forceUpdate();

		},

		changeDataType(type, i) {
			this.equipDataTree[i].oneDeviceForm.data_type = type;
			this.equipDataTree[i].visible = true;
			this.$forceUpdate();
		},

		changeDataGroup(i) {
			this.equipDataTree[i].visible = true;
		},

		// closeOutside() {
		// 	this.Socket.close();
		// 	//this.outerVisible = false;
		// },
		onError(e) {
			var that = this;
			console.log("连接失败，尝试重连")
			this.Socket.close();
			clearInterval(that.timer);
			//this.getSensors(this.form.device);

		},

		isObject(obj) {
			return obj.constructor.toString().indexOf("Object") > -1;
		},
		onMessage(msg) {
			var that = this;
			var messageData = JSON.parse(msg.data);
			if (messageData.result == "success" && this.isObject(messageData.data)) {
				var liveDatas = messageData.data;
				for (let i = 0, len = this.equipDataTree.length; i < len; i++) {
					if (liveDatas.equip.id == this.equipDataTree[i].id) {
						if (liveDatas.equip) {
							this.equipDataTree[i].is_on = liveDatas.equip.is_on;
							this.equipDataTree[i].is_alarm = liveDatas.equip.is_alarm;
							//this.equipDataTree[i].last_data_time = liveDatas.equip.last_data_time;
							// if(this.equipDataTree[i].is_alarm==1){
							// 	this.$notify({
							// 		title: '警告',
							// 		message: '设备:'+that.equipDataTree[i].equip_name+',正在报警，请及时处理!',
							// 		type: 'warning',
							// 		duration: 6000,
							// 		offset: 150
							// 	});
							// }
							if (liveDatas.equip.is_on != 1) {
								this.$notify({
									title: '警告',
									message: '设备:' + that.equipDataTree[i].equip_name +
										'连接中断,若为设备重启将马上恢复,否则请检查设备连接!',
									type: 'warning',
									duration: 6000,
									offset: 150
								});
								//若设备突然中断离线，清空正在显示的数值；
								if (that.equipDataTree[i].type == 1) {
									for (let n = 0, len = that.equipDataTree[i].groups.length; n < len; n++) {
										for (let m = 0, len2 = that.equipDataTree[i].groups[n].sensors.real.length; m <
											len2; m++) {
											that.equipDataTree[i].groups[n].sensors.real[m].value = '';
										}
										for (let m = 0, len2 = that.equipDataTree[i].groups[n].sensors.vars.length; m <
											len2; m++) {
											that.equipDataTree[i].groups[n].sensors.vars[m].value = '';
										}

									}
								} else {
									for (let n = 0, len = that.equipDataTree[i].sensors.real.length; n < len; n++) {
										that.equipDataTree[i].sensors.real[n].value = '';
									}
									for (let n = 0, len = that.equipDataTree[i].sensors.vars.length; n < len; n++) {
										that.equipDataTree[i].sensors.vars[n].value = '';
									}
								}
							}

						}
						if (liveDatas.data && liveDatas.equip) {
							if (that.box == "live" && (liveDatas.data[that.poid] != undefined) && (liveDatas.data[that
								.poid] != null)) {
								that.live_option.series[0].data.push(liveDatas.data[that.poid]);
								that.live_option.xAxis.data.push(liveDatas.time.substr(5, 5) + "\n" + liveDatas.time
									.substr(11));
								//that.live_option.series[0].data = that.livedata;
								//that.live_option.xAxis.data = that.livetimes;
								if ((that.live_option.series[0].data != []) && (that.live_option.xAxis.data != [])) {
									var chart_2 = that.$refs.myChartLive;
									var myChartLive = echarts.init(chart_2);
									// myChartLive.setOption(that.live_option);
									myChartLive.setOption(that.live_option);
									that.loading_2 = false;
									window.addEventListener("resize", () => {
										myChartLive.resize();
									})
								} else {
									that.lineout = "live";
								}
							}
							if (that.equipDataTree[i].type == 1) {
								for (let n = 0, len = that.equipDataTree[i].groups.length; n < len; n++) {
									for (let m = 0, len2 = that.equipDataTree[i].groups[n].sensors.real.length; m <
										len2; m++) {
										for (let key in liveDatas.data) {
											if (that.equipDataTree[i].groups[n].sensors.real[m].id == key) {
												that.equipDataTree[i].groups[n].sensors.real[m].value = liveDatas.data[
													key];
											}

										}

									}
									if (that.equipDataTree[i].groups[n].sensors.vars && (that.equipDataTree[i].groups[
										n].sensors.vars.length)) {
										for (let m = 0, len2 = that.equipDataTree[i].groups[n].sensors.vars.length; m <
											len2; m++) {
											for (let key in liveDatas.data) {
												if (that.equipDataTree[i].groups[n].sensors.vars[m].id == key) {
													that.equipDataTree[i].groups[n].sensors.vars[m].value = liveDatas
														.data[key];
												}

											}

										}
									}
								}
								//this.$forceUpdate();
							} else {
								for (let n = 0, len = that.equipDataTree[i].sensors.real.length; n < len; n++) {
									for (let key in liveDatas.data) {
										if (that.equipDataTree[i].sensors.real[n].id == key) {
											that.equipDataTree[i].sensors.real[n].value = liveDatas.data[key];
										}

									}
								}
								if (that.equipDataTree[i].sensors.vars && (that.equipDataTree[i].sensors.vars
									.length)) {
									for (let n = 0, len = that.equipDataTree[i].sensors.vars.length; n < len; n++) {
										for (let key in liveDatas.data) {
											if (that.equipDataTree[i].sensors.vars[n].id == key) {
												that.equipDataTree[i].sensors.vars[n].value = liveDatas.data[key];
											}
										}
									}
								}
							}
						}
					}
				}



			} else {
				console.log(messageData.message);
			}
		},

		onClose(e) {
			this.Socket.close();
			console.log('连接关闭')
		},

		changeVal(item, type) {
			var that = this;
			this.$prompt('您正在改写' + '<span style="color:red;">' + item.sensor_name + '</span>' + '的值,请慎重操作!', '写值操作', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern: item.show_type == 2 ? /^-{0,1}\d+(\.\d+)?$/ : '',
				dangerouslyUseHTMLString: true,
				inputPlaceholder: item.value,
				inputErrorMessage: item.show_type == 2 ? '设值错误，值必须为数字！' : ''
			}).then(({
				value
			}) => {
				if (item.show_type == 2 && (value === '' || value === null)) {
					this.$message({
						type: 'error',
						offset: 300,
						message: '数值型修改值不能为空！',
						center: true
					});
					return false;
				}
				this.$http({
					method: 'post',
					url: 'api/sensor/write',
					data: {
						"id": item.id,
						"value": value

					}
				}).then(res => {
					if (res && res.data.result == "success") {
						item.value = value;
						that.$message({
							message: '恭喜,写入数据点成功!',
							type: 'success',
							center: true
						});
					}
					// console.log(that.pointdata[0].icon)
				}).catch(error => {
					console.log(error);
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '取消设值!'
				});

			});
		},

		changeState(item, type, event) {
			//event.stopPropagation();
			//event.stopImmediatePropagation();
			let state = "";
			state = event.target.checked ? '打开' : '关闭';
			//state = item.value==1 ? '打开' : '关闭';
			let newValue = state == '打开' ? 1 : 0;
			this.$confirm('您确定要' + state + '当前开关吗？' + state + '后,将无法撤销,是否确认?', state + item.sensor_name, {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http({
					method: 'post',
					url: 'api/sensor/write',
					data: {
						"id": item.id,
						"value": newValue
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.$message({
							message: '恭喜,修改数据点状态成功!',
							type: 'success',
							center: true
						});
					} else {
						this.refreshFun(1000, item, type);
					}

				}).catch(error => {
					console.log(error)
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消修改,将自动恢复！'
				});
				//新开关取消不能自动恢复，人为恢复；
				if (event.target.checked) {
					event.target.checked = false;
				} else {
					event.target.checked = true;
				}
				this.refreshFun(1000, item, type);
			});
		},

		//读写状态改值
		changeState2(item, type) {
			this.dialogFormVisible = true;
			this.sateForm.sensor_name = item.sensor_name;
			this.sateForm.id = item.id;
			this.sateForm.equip_id = item.equip_id;
			this.sateForm.slave_id = item.slave_id ? item.slave_id : 0;
			this.sateForm.type = type;
		},
		//读写报警改值
		changeState3(item, type) {
			this.dialogFormVisible_2 = true;
			this.sateForm.sensor_name = item.sensor_name;
			this.sateForm.id = item.id;
			this.sateForm.equip_id = item.equip_id;
			this.sateForm.slave_id = item.slave_id ? item.slave_id : 0;
			this.sateForm.type = type;
		},
		//读写多位开关改值
		changeState4(item, type) {
			if (item.read_write == 2) {
				event.preventDefault();
				this.dialogFormVisible_4 = true;
				this.sateForm.type = type;
				this.sateForm.sensor_name = item.sensor_name;
				this.sateForm.id = item.id;
				this.sateForm.equip_id = item.equip_id;
				this.sateForm.slave_id = item.slave_id ? item.slave_id : 0;
				this.sateForm.value = item.value;
				this.sateForm.ext_vars = item.ext_vars;
				//this.keyLen=Object.keys(item.ext_vars).length;
				this.threeSW = item.ext_vars[this.sateForm.value];
			} else {
				this.$message({
					type: 'info',
					duration: 2000,
					message: '只读类型，不可操作!'
				});
			}
		},

		letOneToZero() {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/sensor/write',
				data: {
					"id": this.sateForm.id,
					"value": 1

				}
			}).then(res => {
				if (res && res.data.result == "success") {
					this.setStateVal(0);
				}
			}).catch(error => {
				console.log(error)
			});

		},

		letZeroToOne() {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/sensor/write',
				data: {
					"id": this.sateForm.id,
					"value": 0

				}
			}).then(res => {
				if (res && res.data.result == "success") {
					this.setStateVal(1);
				}
			}).catch(error => {
				console.log(error)
			});

		},

		setStateVal(val) {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/sensor/write',
				data: {
					"id": this.sateForm.id,
					"value": val

				}
			}).then(res => {
				if (res && res.data.result == "success") {
					if (this.dialogFormVisible) {
						this.$message({
							message: '恭喜,修改状态成功!',
							type: 'success',
							center: true
						});
						this.dialogFormVisible = false;
					} else if (this.dialogFormVisible_2) {
						this.$message({
							message: '恭喜,清除报警成功!',
							type: 'success',
							center: true
						});
						this.dialogFormVisible_2 = false;
					} else if (this.dialogFormVisible_3) {
						this.$message({
							message: '恭喜,开关操作成功!',
							type: 'success',
							center: true
						});
						this.dialogFormVisible_3 = false;
					} else if (this.dialogFormVisible_4) {
						this.$message({
							message: '恭喜,多位开关操作成功!',
							type: 'success',
							center: true
						});
						this.dialogFormVisible_4 = false;
					}
				} else {
					this.refreshFun(1000, this.sateForm, this.sateForm.type);
				}
				this.dialogFormVisible_4 = false;
				this.dialogFormVisible_3 = false;
				this.dialogFormVisible_2 = false;
				this.dialogFormVisible = false;
			}).catch(error => {
				console.log(error)
			});

		},

		changeBox(event) {
			var that = this;
			if (event.target.id) {
				this.box = event.target.id;
				switch (this.box) {
					case 'live':
						this.roundLineLive(this.chartItem, this.chartItem.equip_type);
						break;
					case 'historyData':
						this.roundLineHis(this.chartItem);
						break;
				}
			}
		},

		changeMenu(key, e) {
			e.stopPropagation();
			var that = this;
			if (key) {
				console.log(key);
				//let nowId = event.target.id?event.target.id:event.target.parentElement.id;
				this.menuActive = key;
				this.topTab = key;
				// if(key!='map'){
				// 	this.map.destroy();
				// 	this.$refs.content.style.height=0;
				// 	this.$refs.content.style.overflow="hidden";

				// }
				this.chooseTab(this.topTab);
			}
		},

		roundLineHis(item) {
			var that = this;
			//this.form.value = [that.getNowFormatDate(), that.getNowFormatDate()];
			this.loading_1 = true;
			var hisXdata = [];
			var hisYdata = [];
			this.$http({
				method: 'post',
				url: 'api/sensor/graph',
				data: {
					"id": item.id,
					"date_range": that.form.value.join('~')

				}
			}).then(res => {
				if (res && res.data.result == "success") {
					if (res.data.data !== []) {
						for (var i = 0; i < res.data.data.length; i++) {

							var tim = res.data.data[i].time.substr(5, 5) + "\n" + res.data.data[i].time.substr(
								11);
							var val = res.data.data[i].value;
							//因为值有可能0,所以这样判断
							if (tim && val !== null && val !== undefined && val !== '') {
								hisXdata.push(tim); //如果用unshift,将无法显示,且unshift()性能比push慢100倍;
								hisYdata.push(val);

							}
						}
						that.ch_option.xAxis.data = hisXdata.reverse();
						that.ch_option.series[0].data = hisYdata.reverse();
						that.ch_option.series[0].name = item.sensor_name;
						var chart = window.document.getElementById('myChart');
						//var myChart = echarts.init(chart,'dark');//'dark'表示深色模式,深色背景
						var myChart = echarts.init(chart);
						myChart.setOption(that.ch_option);
						window.addEventListener("resize", () => {
							myChart.resize();
						})
						that.loading_1 = false;
					} else {
						that.lineout = 'history';
					}
				}
				// console.log(that.pointdata[0].icon)
			}).catch(error => {

				console.log(error)
			});
		},

		changeChart() {
			this.roundLineHis(this.chartItem);
		},
		roundLineLive(item, equipType) {
			var that = this;
			this.innerVisible = true;
			this.box = "live";
			this.lineout = "";
			this.loading_2 = true;
			this.chartItem = Object.assign({
				'equip_type': equipType
			}, item);
			this.live_option.series[0].data = [];
			this.live_option.series[0].label.formatter = "{c}" + item.unit;
			this.live_option.xAxis.data = [];
			this.sensorSave = item.save_type;
			//this.livetimes = []; //进来之前先清空上次的数据
			//this.livedata = []; //不然会数据混连
			if (equipType == 1) {
				this.refreshOneSlaveData(item.equip_id, item.slave_id, 1);
			} else {
				this.refreshOneDeviceData(item.equip_id, 1);
			}
			this.nowSensor = item.sensor_name;
			this.which = item.save_type == 2 ? "实时曲线" : "曲线图";
			this.poid = item.id;
			this.live_option.series[0].name = item.sensor_name;
		},

		closeLine() {
			this.innerVisible = false;
			this.poid = 0;
			this.box = "";

		},
		//拍照
		showPhoto(id, name) {
			this.photoForm.photoList = [];
			this.photoForm.id = id;
			if (!this.photoForm.equip_name) {
				this.photoForm.equip_name = name;
			}
			this.$http({
				method: 'post',
				async: false,
				url: 'api/camera_picture/lists',
				data: {
					"equip_id": id
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					//console.log(res.data.data);
					if (res.data.data.length) {
						for (let i = 0, len = res.data.data.length; i < len; i++) {
							let photo = {
								id: res.data.data[i].id,
								path: res.data.data[i].file_path,
								name: res.data.data[i].file_name,
								time: res.data.data[i].upload_time
							};
							this.photoForm.photoList.push(photo);
						}
						//console.log(this.photoForm.photoList);
					}
				}
				// console.log(this.cameras);
			}).catch(error => {
				console.log(error);
			});
			this.dialogPhotoVisible = true;
		},

		takeAndUpload(id) {
			this.photoLoading = true;
			this.$http({
				method: 'post',
				async: false,
				url: 'api/camera_picture/upload',
				data: {
					"equip_id": id
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					this.$message({
						message: '拍照成功，已上传！',
						type: 'success',
						offset: 150,
						duration: 2000,
						center: true
					})
					this.showPhoto(id);
					this.photoLoading = false;
				} else {
					this.photoLoading = false;
				}
				// console.log(this.cameras);
			}).catch(error => {
				console.log(error);
				this.photoLoading = false;
			});
		},

		letBig(path) {
			this.bigPhotoVisible = true;
			this.photoForm.bigPath = path;
		},

		// downloadIamge(imgsrc,name) { // 下载图片地址和图片名

		//     // var a = document.createElement('a'); // 生成一个a元素
		//     // a.download = name || 'photo'; // 设置图片名称
		//     // a.href = imgsrc; // 将生成的URL设置为a.href属性
		//     // a.click(); // 触发a的单击事件
		// 	// console.log(filename);
		// 	// const a = document.createElement('a');
		// 	// 	a.setAttribute('src', url);
		// 	// 	//a标签的download属性	 filename:规定被下载的超链接目标。
		// 	// 	a.setAttribute('download', filename);
		// 	// 	document.body.appendChild(a);
		// 	// 	a.click();
		// 	//     document.body.removeChild(a);

		//     var image = new Image();
		//     // 解决跨域 Canvas 污染问题
		//     image.setAttribute('crossOrigin','anonymous');
		//     image.onload = function() {
		// 	    var canvas = document.createElement('canvas');
		// 	    canvas.width = image.width;
		// 	    canvas.height = image.height;
		// 	    var context = canvas.getContext('2d');
		// 	    context.drawImage(image, 0, 0, image.width, image.height);
		// 	    var url = canvas.toDataURL('image/jpeg'); //得到图片的base64编码数据
		// 	    var a = document.createElement('a'); // 生成一个a元素
		// 	    var event = new MouseEvent('click'); // 创建一个单击事件
		// 	    a.download = name || 'photo'; // 设置图片名称
		// 	    a.href = url; // 将生成的URL设置为a.href属性
		//         a.dispatchEvent(event); // 触发a的单击事件
		//     }
		//     image.src = imgsrc;
		// },

		// downloadIamge(url,name){
		// 	let blobUrl="";
		// 	this.$http.get(url).then(res => {
		// 	    return res.blob()
		// 	  }).then(blob => {
		// 	    blobUrl=URL.createObjectURL(blob)
		// 	})
		// 	const a = document.createElement('a');
		// 	a.setAttribute('src', blobUrl);
		// 	//a标签的download属性	 filename:规定被下载的超链接目标。
		// 	a.setAttribute('download', name);
		// 	document.body.appendChild(a);
		// 	a.click();
		// 	document.body.removeChild(a);
		// },

		// downloadIamge(imgsrc,name){
		// 	let x = new XMLHttpRequest();
		// 	x.open('GET', imgsrc, true)
		// 	x.responseType = 'blob'
		// 	x.onload = function () {
		// 		let url = window.URL.createObjectURL(x.response)
		// 		let a = document.createElement('a')
		// 		a.href = url
		// 		a.download = name;
		// 		a.click()
		// 	}
		// 	x.send()
		// },

		sureDeletePhoto(id, type = "single") {
			this.$confirm(type == "single" ? '删除后无法恢复，确认删除此照片吗?' : '删除后无法恢复，确认删除这些照片吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.deletePhoto(id);
			}).catch(() => {
				this.photoForm.photoIds = [];
				this.showPhoto(this.photoForm.id);
				// this.$message({
				// 	type: 'info',
				// 	message: '已取消删除'
				// });
			});
		},


		deletePhoto(id) {
			this.$http({
				method: 'post',
				async: false,
				url: 'api/camera_picture/delete',
				data: {
					"id": id
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					this.$message({
						message: '删除照片成功！',
						type: 'success',
						offset: 150,
						duration: 2000,
						center: true
					})
					this.showPhoto(this.photoForm.id);
				}
				// console.log(this.cameras);
			}).catch(error => {
				console.log(error);
			});
		},

		deleteManyPhoto() {
			if (!this.photoForm.photoIds.length) {
				this.$message({
					message: '你尚未选择图片，请点击图片选择!',
					type: 'info',
					offset: 150,
					duration: 2000,
					center: true
				})
				return;
			} else {
				this.sureDeletePhoto(this.photoForm.photoIds.join(','), 'many');
			}
		},

		deleteArrayItem(arr, item) {
			if (!arr.length) { return; }
			let num = arr.indexOf(item);
			arr.splice(num, 1);
			return arr;
		},


		deleteSelect(event, item) {
			if (!item.select) {
				event.target.style.border = "1px solid red";
				event.target.style.opacity = 0.5;
				this.photoForm.photoIds.push(item.id);
				console.log(this.photoForm.photoIds);
				item.select = true;
			} else {
				event.target.style.border = "none";
				event.target.style.opacity = 1;
				this.photoForm.photoIds = this.deleteArrayItem(this.photoForm.photoIds, item.id);
				console.log(this.photoForm.photoIds);
				item.select = false;
			}

		},

		async deleteAllPhoto() {
			var that = this;
			this.photoForm.photoIds = [];
			await this.photoForm.photoList.forEach(function (item, index, arr) {
				that.photoForm.photoIds.push(item.id);
			});
			this.sureDeletePhoto(this.photoForm.photoIds.join(','), 'many');
		},

		closePhotoDialog() {
			this.photoForm.photoIds = [];
			this.dialogPhotoVisible = false;
			this.photoForm.equip_name = "";
		},

		//视频监控相关函数
		changeCamera(cam, ind) {
			var addr = "";
			for (let i = 0; i < this.cameras.length; i++) {
				if (this.cameras[i].value == cam) {
					addr = this.cameras[i].addr;
				}
			};
			switch (ind) {
				case 1:
					this.$refs.videoBox1.innerHTML =
						"<video id='play1' autoplay  playsInline webkit-playsinline controls='controls' src=" + addr +
						" style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
					this.player1 = new EZUIKit.EZUIPlayer("play1");
					break;
				case 2:
					this.$refs.videoBox2.innerHTML =
						"<video id='play2' autoplay  playsInline webkit-playsinline controls='controls' src=" + addr +
						" style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
					this.player2 = new EZUIKit.EZUIPlayer("play2");
					break;
				case 3:
					this.$refs.videoBox3.innerHTML =
						"<video id='play3' autoplay  playsInline webkit-playsinline controls='controls' src=" + addr +
						" style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
					this.player3 = new EZUIKit.EZUIPlayer("play3");
					break;
				case 4:
					this.$refs.videoBox4.innerHTML =
						"<video id='play4' autoplay  playsInline webkit-playsinline controls='controls' src=" + addr +
						" style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
					this.player4 = new EZUIKit.EZUIPlayer("play4");
					break;
			}

		},

		getCameraAll(id) {
			var that = this;
			this.cameras = [];
			this.$http({
				method: 'post',
				async: false,
				url: 'api/camera/all',
				data: {
					"product_id": id,
					"equip_id": ''
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					//this.camerasVideo=Array.from(res.data.data);
					this.Vcount = res.data.data.length;
					//rtmp与hls格式的区别
					//1.rtmp延时低（几秒），界面相对友好，但需要安装Adobe flash player
					//2.hls延时长（20至30秒），界面欠友好（但不影响），支持画中画（视频悬浮于右下角,可拖动位置，切换页面后可继续观看），无需安装Adobe flash player
					//3.flv格式延时与界面和hls一样，其他未测试；
					//另：免费个人账号下hls受并发限制后，rtmp还没有,可能是延时；企业账号未测试
					//已于2022年4月21日启用flv格式（与rtmp等价，但是不用安装Adobe flash player，低延时（只有3-5秒）
					//字段没变，rtmp_addr实际是flv格式；
					if (this.Vcount) {
						for (let i = 0; i < res.data.data.length; i++) {
							let camera = {
								value: res.data.data[i].id,
								label: res.data.data[i].camera_name,
								equip_name: res.data.data[i].equip_name ? res.data.data[i].equip_name :
									'全部',
								addr: res.data.data[i].rtmp_addr
							}
							this.cameras.push(camera);
						}
					}
					this.showVideo = true;
				}
				// console.log(this.cameras);
			}).catch(error => {
				console.log(error);
			});

		},

		showCamera() {
			var that = this;
			if (this.Vcount >= 4) {
				this.camera1 = this.cameras[0].value;
				this.camera2 = this.cameras[1].value;
				this.camera3 = this.cameras[2].value;
				this.camera4 = this.cameras[3].value;
				this.$refs.videoBox1.innerHTML =
					"<video id='play1'  playsInline webkit-playsinline controls='controls' src=" + this.cameras[0]
						.addr + " style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
				this.$refs.videoBox2.innerHTML =
					"<video id='play2'  playsInline webkit-playsinline controls='controls' src=" + this.cameras[1]
						.addr + " style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
				this.$refs.videoBox3.innerHTML =
					"<video id='play3'  playsInline webkit-playsinline controls='controls' src=" + this.cameras[2]
						.addr + " style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
				this.$refs.videoBox4.innerHTML =
					"<video id='play4'  playsInline webkit-playsinline controls='controls' src=" + this.cameras[3]
						.addr + " style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
				//如是rtmp格式，在source中加type='rtmp/flv'
				//setTimeout(function() {
				this.player1 = new EZUIKit.EZUIPlayer("play1");
				this.player2 = new EZUIKit.EZUIPlayer("play2");
				this.player3 = new EZUIKit.EZUIPlayer("play3");
				this.player4 = new EZUIKit.EZUIPlayer("play4");
				//}, 1000)
			} else if (this.Vcount < 4) {
				if (this.cameras[0] && this.cameras[0].addr) {
					this.$refs.videoBox1.innerHTML =
						"<video id='play1'  playsInline webkit-playsinline controls='controls' src=" + this.cameras[0]
							.addr + " style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
					this.player1 = new EZUIKit.EZUIPlayer("play1");
				} else {
					this.player1 = null;
					this.$refs.videoBox1.innerHTML =
						"<div class='imgbig'  style='color:#aaa;font-size:0.4rem;line-height:400px;'>暂无监控视频</div>";
				}
				if (this.cameras[1] && this.cameras[1].addr) {
					this.$refs.videoBox2.innerHTML =
						"<video id='play2'  playsInline webkit-playsinline controls='controls' src=" + this.cameras[1]
							.addr + " style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
					this.player2 = new EZUIKit.EZUIPlayer("play2");
				}
				if (this.cameras[2] && this.cameras[2].addr) {
					this.$refs.videoBox3.innerHTML =
						"<video id='play3'  playsInline webkit-playsinline controls='controls' src=" + this.cameras[2]
							.addr + " style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
					this.player3 = new EZUIKit.EZUIPlayer("play3");
				}
			} else if (this.Vcount == 0) {

			}
		},

		//历史数据相关函数
		async getAllGroups(id) {
			var groups = [{
				value: 0,
				label: "全部"
			}];
			return await this.$http({
				method: 'post',
				async: false,
				url: 'api/sensor_group/all',
				data: {
					"equip_id": id
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					for (let i = 0; i < res.data.data.length; i++) {
						let group = {
							value: res.data.data[i].id,
							label: res.data.data[i].sgroup_name
						}
						groups.push(group)
					}
					return groups
				} else {
					return false;
				}
				// console.log(that.pointdata[0].icon)
			}).catch(error => {
				console.log(error);
				return false;

			});
		},

		// async getSlave(id) {
		// 	console.log('a');
		// 	await this.getAllSlaves(id).then(res=>{
		// 	   this.slaves=Array.from(res);
		// 	});
		// 	if (this.slaves[1]) {
		// 		this.form.slave = this.slaves[0].value;

		// 		this.slaveName = this.slaves[0].label;
		// 	} else {
		// 		this.form.slave = "暂无子设备";
		// 	}
		// },


		async getHistoryGroups(id) {
			await this.getAllGroups(id).then(res => {
				this.historyGroups = Array.from(res);
			});
			this.historyForm.sgroup_id = this.historyGroups[0].value;
		},

		// async getSensorsAll(id){
		// 	this.historySensors=[];
		// 	return await this.$http({
		// 		method: 'post',
		// 		url: 'api/sensor/all',
		// 		data:this.historyForm.deviceType == 1 && this.historyForm.slavesCount > 1 && this.historyForm.slave_id? {
		// 			"equip_id":this.historyForm.device,
		// 			"slave_id":id,
		// 			"action":'export'
		// 		} : {
		// 			"equip_id":this.historyForm.device,
		// 			"action":'export'
		// 		}
		// 	}).then(res => {
		// 		if (res && res.data.result == "success") {
		// 			for (let i = 0; i < res.data.data.length; i++) {
		// 				let sensor = {
		// 					value: res.data.data[i].id,
		// 					label: res.data.data[i].sensor_name
		// 				}
		// 				this.historySensors.push(sensor);
		// 			}
		// 		}else{
		// 			return false;
		// 		}
		// 		// console.log(that.pointdata[0].icon)
		// 	}).catch(error => {
		// 		console.log(error);
		// 		return false;

		// 	});
		// },

		changeHistoryDevice(device) {
			this.varSensors = [];
			this.queryParams.pageNo = 1;
			this.historyForm.sensorIds = [];
			if (this.historyType == 'chart' && this.myChart) {
				this.myChart.dispose();
			}
			for (let i = 0, len = this.devices.length; i < len; i++) {
				if (this.devices[i].value == device) {
					this.historyForm.deviceType = this.devices[i].type;
					this.historyForm.groupsCount = this.devices[i].groupsCount;
					if (this.historyForm.deviceType == 1) {
						this.getHistoryGroups(device);
					}
					break;
				}
			}
			this.getHistory(1, this.queryParams.pageSize, device, 0, 0, this.historyForm.value.join('~'));
		},

		changeHistoryGroup(group) {
			this.varSensors = [];
			this.queryParams.pageNo = 1;
			this.historyForm.sensorIds = [];
			if (this.historyType == 'chart' && this.myChart) {
				this.myChart.dispose();
			}
			this.getHistory(1, this.queryParams.pageSize, this.historyForm.device, group, 0, this.historyForm.value
				.join('~'));
		},

		//callback接收回调参数，展开为true，收起为false；
		//changeHistorySensor(callback,sensor){
		//if(callback){return };}
		changeHistorySensor(sensor) {
			//if(callback){return };
			//this.source.cancel('取消');
			this.queryParams.pageNo = 1;
			var that = this;
			if (this.historyType == 'chart') {
				//this.loadingHistory=true;
				//这是取消连续点击时造成的重复请求，
				//只有点击的速度快过响应速度时才会起作用；
				// this.cancelRequest();
				//清除上一次点击选择未执行完成的延时；
				if (this.historyTimeout) {
					clearTimeout(that.historyTimeout);
				}
				if (this.myChart) {
					this.myChart.dispose();
				}
				//延时用于等待客户继续选择，避免重复请求；
				//当参数长度和实际长度相等时，说明客户已选择完毕，可以开始请求
				this.historyTimeout = setTimeout(function () {
					if (sensor.length == that.historyForm.sensorIds.length) {
						if (that.historyForm.sensorIds.length <= 10) {
							that.getHistoryChart(that.historyForm.device, that.historyForm.sgroup_id, that
								.historyForm.sensorIds.join(','), that.historyForm.value.join('~'));
						} else {
							that.showMessage();
							let ten = that.historyForm.sensorIds.slice(0, 10);
							that.getHistoryChart(that.historyForm.device, that.historyForm.sgroup_id, ten.join(
								','), that.historyForm.value.join('~'));
						}

					}
				}, 2000)
			} else {
				this.getHistory(1, that.queryParams.pageSize, that.historyForm.device, that.historyForm.sgroup_id,
					sensor.join(','), that.historyForm.value.join('~'));
			}
		},

		changeHistoryTime(val) {
			this.queryParams.pageNo = 1;
			if (this.historyType == 'chart' && this.myChart) {
				this.myChart.dispose();
			}
			this.getHistory(1, this.queryParams.pageSize, this.historyForm.device, this.historyForm.sgroup_id, this
				.historyForm.sensorIds.join(','), val.join('~'));
		},

		showHistoryTable(num = 1, size = 10, id, groupid = '', sensors, val) {
			this.historyType = "table";
			this.getHistory(1, size, id, groupid, sensors, val);
		},


		getHistory(num = 1, size = 20, id, groupid, sensors, val) {
			this.historyData = [];
			this.fields = [];
			this.$http({
				method: 'post',
				url: 'api/equip/history',
				data: this.historyForm.deviceType == 1 && this.historyForm.groupsCount > 1 && this.historyForm
					.sgroup_id ? {
					"limit": size,
					"page": num,
					'id': id,
					"sgroup_id": groupid,
					"sensor_id": sensors,
					"date_range": val
				} : {
					"limit": size,
					"page": num,
					"id": id,
					"sensor_id": sensors,
					"date_range": val

				}
			}).then(res => {
				if (res && res.data.result == "success") {
					for (var key in res.data.data.field) {
						var field = {
							value: key,
							label: res.data.data.field[key]
						}
						this.fields.push(field);
					}
					if (!sensors) {
						this.varSensors = Array.from(this.fields);
					}
					if (this.historyType == 'table') {
						this.historyData = res.data.data.values;
						this.queryParams.total = res.data.count;
						for (let i = 0, len = res.data.data.values.length; i < len; i++) {
							this.historyData[i].num = res.data.data.values[i].num + 1 + (this.queryParams
								.pageNo - 1) * this.queryParams.pageSize;
							this.historyData[i].time = res.data.data.values[i].time.substr(5, 14);
						}
					} else {
						this.getHistoryChart(id, groupid, sensors, val);
					}
				}
			}).catch(error => {
				console.log(error);
			});
		},

		// <a :href="'https://api.ykiot.net/api/equip/download?id='+historyForm.device
		// 	+'&sgroup_id='+historyForm.sgroup_id+'&sensor_id='+historyForm.sensorIds.join(',')+'&date_range='+historyForm.value.join('~')+'&token='+win.localStorage.getItem('attoken')"
		// 	style="vertical-align:middle;color:white;margin-left:-0.25rem;" target="_blank"
		// 	class="newAll">导出</a>
		sendOutHistory() {
			var that = this;
			window.location.href = that.baseurl + 'api/equip/download?id=' + that.historyForm.device
				+ '&sgroup_id=' + that.historyForm.sgroup_id + '&sensor_id=' + that.historyForm.sensorIds.join(',') + '&date_range=' + that.historyForm.value.join('~') + '&token=' + localStorage.getItem('attoken');
		},

		showMessage() {
			this.$message({
				message: '最多只支持同时绘制10条曲线,超出将只绘制前10条!',
				type: 'info',
				offset: 100,
				duration: 4000,
				center: true
			});
		},

		cancelRequest() {
			let cancelArr = window.axiosCancel;
			cancelArr.forEach((ele, index) => {
				ele.cancel('请求被取消了');
				delete window.axiosCancel[index];
			})
		},


		//导出历史数据函数，与使用a标签效果一样，需要将数据流转换为文件，
		//在这里显得多此一举，暂不使用，因为使用a标签导出的直接就是表格
		// sendOutHistory(id,sgroupid='',sensors,val){
		// 	this.$http({
		// 		method: 'get',
		// 		url: 'api/equip/download',
		// 		params:{
		// 			"id":id,
		// 			"sgroup_id": sgroupid,
		// 			"sensor_id": sensors,
		// 			"date_range":val
		// 		},
		// 		responseType: 'blob'
		// 	}).then(res => {
		// 		if (res && res.status == 200) {
		// 			//console.log(res.data);//这里是数据流
		// 			this.downloadFile(res.data,"历史报表");
		// 			console.log("导出成功");
		// 		}
		// 	}).catch(error => {
		// 		console.log(error);
		// 	});
		// },

		// downloadFile (data, name) {
		// 	if (!data) {
		// 		 this.$message.error('下载失败，解析数据为空！')
		// 		 return
		// 	}
		// 	// 创建一个新的url，此url指向新建的Blob对象
		// 	let url = window.URL.createObjectURL(new Blob([data]));
		// 	// 创建a标签，并隐藏a标签
		// 	let link = document.createElement('a');
		// 	link.style.display = 'none';
		// 	// a标签的href属性指定下载链接
		// 	link.href = url;
		// 	//setAttribute() 方法添加指定的属性，并为其赋指定的值
		// 	// 后缀格式.csv/.xsls要和需要和后端返回格式相同，这里以.csv为例
		// 	link.setAttribute('download', name + '.xsls');
		// 	document.body.appendChild(link)
		// 	link.click();
		// 	document.body.removeChild(link); //下载完成移除元素
		// },

		getHistoryChart(id, groupid = '', sensors, val) {
			var that = this;
			let ten = sensors;
			this.historyType = 'chart';
			if (!sensors && this.varSensors.length > 10) {
				this.$message({
					message: '你尚未选择变量，默认显示前10条曲线！',
					type: 'info',
					offset: 100,
					duration: 4000,
					center: true
				});
				let sensor = [];
				for (let i = 0; i < 10; i++) {
					sensor.push(that.varSensors[i].value);
				}
				ten = sensor.join(',');
			} else if (!sensors && this.varSensors.length <= 10) {
				if (!this.varSensors.length) { //没有设置存储的变量点
					return;
				}
				this.$message({
					message: '你尚未选择变量，默认显示全部曲线！',
					type: 'info',
					offset: 100,
					duration: 4000,
					center: true
				});
				let sensor = [];
				for (let i = 0; i < this.varSensors.length; i++) {
					sensor.push(that.varSensors[i].value);
				}
				ten = sensor.join(',');
			} else if (sensors && sensors.split(',').length > 10 && this.varSensors.length > 10) {
				this.showMessage();
				let sensor = sensors.split(',');
				ten = sensor.slice(0, 10).join(',');
			}
			this.lines = [];
			this.loadingHistory = true;
			this.history_chart.xAxis.data = [];
			this.history_chart.series = [];
			this.history_chart.legend.data = [];
			this.$http({
				method: 'post',
				url: 'api/equip/graph',
				//cancelToken: this.source.token,
				data: this.historyForm.deviceType == 1 && this.historyForm.groupsCount > 1 && this.historyForm
					.sgroup_id ? {
					'id': id,
					"sgroup_id": groupid,
					"sensor_id": ten,
					"date_range": val
				} : {
					"id": id,
					"sensor_id": ten,
					"date_range": val

				}

			}).then(res => {
				if (res && res.data.result == "success") {
					for (let key in res.data.data.field) {
						let line = {
							id: key,
							label: res.data.data.field[key]
						}
						this.lines.push(line);
					}
					for (let i = 0, len = res.data.data.values.length; i < len; i++) {
						this.history_chart.xAxis.data.push(res.data.data.values[i].time.substr(5, 5) + "\n" +
							res.data.data.values[i].time.substr(11));
					}

					if (this.lines.length > 5) {
						for (let n = 0, len2 = this.lines.length; n < len2; n++) {
							this.history_chart.legend.data.push(that.lines[n].label);
							this.history_chart.series.push({
								name: that.lines[n].label,
								type: 'line',
								data: [],
								itemStyle: {
									normal: {
										color: that.lineColor[n]
									}
								},
								smooth: true
							});
						}
					} else {
						for (let n = 0, len2 = this.lines.length; n < len2; n++) {
							this.history_chart.legend.data.push(that.lines[n].label);
							this.history_chart.series.push({
								name: that.lines[n].label,
								type: 'line',
								data: [],
								markPoint: {
									data: [{
										type: 'max',
										name: '最大值'
									}, {
										type: 'min',
										name: '最小值'
									}]
								},
								markLine: {
									data: [{
										type: 'average',
										name: '平均值'
									}]
								},
								itemStyle: {
									normal: {
										color: that.lineColor[n]
									}
								},
								smooth: true
							});
						}
					}
					for (let n = 0, len3 = this.lines.length; n < len3; n++) {
						for (let i = 0, len4 = res.data.data.values.length; i < len4; i++) {
							this.history_chart.series[n].data.push(res.data.data.values[i].data[that.lines[n]
								.id])
						}
						//经测试，不使用单个unshift(),而使用整体reverse(),是因为后者效率高,更快;
						//而且unshift方法比push方法慢100倍,reverse性能最高;
						this.history_chart.series[n].data.reverse();
					}
					setTimeout(function () {
						//经测试，不使用单个unshift(),而使用整体reverse(),是因为后者效率高,更快;
						//而且unshift方法比push方法慢100倍,reverse性能最高;
						that.history_chart.xAxis.data.reverse();
						var chart = that.$refs.historyChart;
						//that.myChart = echarts.init(chart,'dark');//'dark'表示深色模式,深色背景
						that.myChart = echarts.init(chart);
						that.myChart.setOption(that.history_chart);
						window.addEventListener("resize", () => {
							that.myChart.resize();
						})
						that.loadingHistory = false;

					}, 1000)
				}
			}).catch(error => {
				console.log(error);
			});
		},

		goWidth() {
			var that = this;
			this.isShow = !this.isShow;
			if (this.topTab == 'history' && this.historyType == 'chart') {
				this.historyType = 'wait';
				setTimeout(function () {
					that.historyType = 'chart';
				}, 1000)
				setTimeout(function () {
					var chart = that.$refs.historyChart;
					that.myChart = echarts.init(chart);
					that.myChart.setOption(that.history_chart);
					window.addEventListener("resize", () => {
						that.myChart.resize();
					})
				}, 2000)
			} else if (this.topTab == 'analysis') {
				let type = this.analysisType;
				if (this.analysisType == 'chart' || this.analysisType == 'bar') {
					this.analysisType = 'wait';
					setTimeout(function () {
						that.analysisType = type;
					}, 1000)
					setTimeout(function () {
						if (type == 'chart') {
							var chart = that.$refs.analysisChart;
							that.myChart = echarts.init(chart);
							that.myChart.setOption(that.analysis_chart);
							window.addEventListener("resize", () => {
								that.myChart.resize();
							})
						} else if (type == 'bar') {
							var chart = that.$refs.analysisBar;
							that.myChart = echarts.init(chart);
							that.myChart.setOption(that.dataset_option);
							window.addEventListener("resize", () => {
								that.myChart.resize();
							})
						}
					}, 2000)

				}
			}

		},

		//报警记录相关函数
		getAlarm(num = 1, size = 20, equip, time) {
			var that = this;
			if (!equip || !equip.length) {
				equip = [];
			}
			this.alarmData = [];
			this.$http({
				method: 'post',
				url: 'api/alarm/lists',
				data: {
					"product_id": this.optionId,
					"equip_id": equip.join(','),
					"alarm_time": time,
					"limit": size,
					"page": num

				}
			}).then(res => {
				if (res && res.data.result == "success") {
					this.alarmData = Array.from(res.data.data);
					this.queryParams_2.total = res.data.count;
				}
			}).catch(error => {

				console.log(error);
			});
		},

		getAllAlarm() {
			this.alarmForm.device = [];
			this.queryParams_2.pageNo = 1;
			this.getAlarm(this.queryParams_2.pageNo, this.queryParams_2.pageSize, [], this.alarmForm.value.join('~'));
		},

		//操作记录相关函数
		getLogs(num = 1, size = 20, equip, val) {
			var that = this;
			if (!equip || !equip.length) {
				equip = [0];
			}
			this.operData = [];
			this.$http({
				method: 'post',
				url: 'api/equip/logs',
				data: {
					"limit": size,
					"page": num,
					"product_id": this.optionId,
					"id": equip.join(','),
					"log_time": val

				}
			}).then(res => {
				if (res && res.data.result == "success") {
					this.operData = Array.from(res.data.data);
					this.queryParams_3.total = res.data.count;
					for (let i = 0, len = res.data.data.length; i < len; i++) {
						this.operData[i].log_time = res.data.data[i].log_time.substr(5, 14);
					}
				}
			}).catch(error => {

				console.log(error)
			});
		},

		getAllLogs() {
			this.operForm.device = [];
			this.queryParams_3.pageNo = 1;
			this.getLogs(this.queryParams_3.pageNo, this.queryParams_3.pageSize, [0], this.operForm.value.join('~'));
		},
		//数据报表相关函数
		getAnalysisTable(optionId) {
			//console.log(this.analysisForm.value);
			this.tableData = [];
			this.tableFields = [];
			this.tableTables = [];
			this.tableForm.title = '';
			this.$http({
				method: 'post',
				url: 'api/statement/all',
				data: {
					"product_id": optionId

				}
			}).then(res => {
				if (res && res.data.result == "success") {
					if (res.data.data.length) {
						for (let i = 0, len = res.data.data.length; i < len; i++) {
							let table = {
								value: res.data.data[i].id,
								label: res.data.data[i].title
							}
							this.tableTables.push(table);
						}
						this.tableForm.title = this.tableTables[0].value;
						this.getAnalysisData(this.tableForm.title, this.tableForm.value, this.tableForm.type, this.statementType);
					}
				}
			}).catch(error => {
				console.log(error);
			});
		},

		changeAnalysisType(type, way) {
			if (type == 1) {
				this.tableForm.value = this.getNowFormatDate()
			} else if (type == 3) {
				this.tableForm.value = this.getNowFormatDate().substr(0, 7)
			} else if (type == 4) {
				this.tableForm.value = this.getNowFormatDate().substr(0, 4)
			}
			if (way == 'table') {
				this.getAnalysisData(this.tableForm.title, this.tableForm.value, type, 'table');
			} else {
				this.getStatementGraph(this.tableForm.title, type, this.tableForm.value, 'chart')
			}

		},

		getAnalysisData(id, time, type, way = 'table') {
			this.statementType = way;
			if (way == 'chart') {
				this.getStatementGraph(id, type, time, 'chart');
				return;
			}
			this.tableData = [];
			this.tableFields = [];
			this.$http({
				method: 'post',
				url: 'api/statement/data',
				data: {
					"id": id,
					"date": time,
					"type": type
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					if (res.data.data) {
						console.log(res.data.data);
						this.tableFields = Array.from(res.data.data.fields);
						this.tableData = Array.from(res.data.data.values);
						console.log(this.tableFields)
					} else {
						this.tableFields = [];
						this.tableData = [];
					}

				}
			}).catch(error => {
				console.log(error);
			});
		},
		//{'fontSize':'0.3rem', 'border': '1px solid rgba(19,128,128,1)'}
		setCellColor(item) {
			if (item.rowIndex == 0) {
				//console.log(item.row);
				return { 'color': 'deepskyblue', 'fontSize': '0.35rem', 'fontWeight': '700', 'border': '1px solid rgba(19,128,128,1)' };
			} else {
				return { 'fontSize': '0.3rem', 'border': '1px solid rgba(19,128,128,1)' }
			}
		},

		getStatementGraph(title, type, time, way) {
			var that = this;
			this.statementType = way;
			var lines = [];
			this.loadingStatement = true;
			this.statement_chart.xAxis.data = [];
			this.statement_chart.series = [];
			this.statement_chart.legend.data = [];
			this.$http({
				method: 'post',
				url: 'api/statement/graph',
				//cancelToken: this.source.token,
				data: {
					'id': title,
					"date": time,
					"type": type
				}

			}).then(res => {
				if (res && res.data.result == "success") {
					lines = res.data.data.fields;
					for (let i = 0, len = res.data.data.values.length; i < len; i++) {
						// this.statement_chart.xAxis.data.push(res.data.data.values[i].time.substr(5, 5) + "\n" +
						// 	res.data.data.values[i].time.substr(11));
						this.statement_chart.xAxis.data.push(res.data.data.values[i].time);
					}

					if (lines.length > 5) {
						for (let n = 0, len2 = lines.length; n < len2; n++) {
							this.statement_chart.legend.data.push(lines[n]);
							this.statement_chart.series.push({
								name: lines[n],
								type: 'line',
								data: [],
								itemStyle: {
									normal: {
										color: that.lineColor[n]
									}
								},
								smooth: true
							});
						}
					} else {
						for (let n = 0, len2 = lines.length; n < len2; n++) {
							this.statement_chart.legend.data.push(lines[n]);
							this.statement_chart.series.push({
								name: lines[n],
								type: 'line',
								data: [],
								markPoint: {
									data: [{
										type: 'max',
										name: '最大值'
									}, {
										type: 'min',
										name: '最小值'
									}]
								},
								markLine: {
									data: [{
										type: 'average',
										name: '平均值'
									}]
								},
								itemStyle: {
									normal: {
										color: that.lineColor[n]
									}
								},
								smooth: true
							});
						}
					}
					for (let n = 0, len3 = lines.length; n < len3; n++) {
						for (let i = 0, len4 = res.data.data.values.length; i < len4; i++) {
							this.statement_chart.series[n].data.push(res.data.data.values[i].data[n])
						}

						//this.statement_chart.series[n].data.reverse();
					}
					setTimeout(function () {
						//that.statement_chart.xAxis.data.reverse();
						var chart = that.$refs.statementChart;
						//that.myChart = echarts.init(chart,'dark');//'dark'表示深色模式,深色背景
						that.tableChart = echarts.init(chart);
						that.tableChart.setOption(that.statement_chart);
						window.addEventListener("resize", () => {
							that.tableChart.resize();
						})
						that.loadingStatement = false;

					}, 1000)
				}
			}).catch(error => {
				console.log(error);
			});

		},



		//导出数据报表函数
		sendOutTable() {
			var that = this;
			window.location.href = that.$baseurl + 'api/statement/download?id=' + that.tableForm.title
				+ '&date=' + that.tableForm.value + '&type=' + that.tableForm.type + '&token=' + localStorage.getItem('attoken');
		},


		//数据分析相关函数
		async getAnalysisGroups(id) {
			await this.getAllGroups(id).then(res => {
				this.analysisGroups = Array.from(res);
				this.analysisGroups.shift();
			});
			this.analysisForm.sgroup_id = this.analysisGroups[0].value;
			//this.getAnalysisSensorsAll(this.analysisForm.sgroup_id);

		},

		changeAnalysisDevice(device) {
			var that = this;
			if (this.myChart) {
				this.myChart.dispose();
			}
			this.analysisData = [];
			this.analysisFields = [];
			this.analysisVarSensors = [];
			this.analysisForm.sensorIds = [];
			for (let i = 0, len = this.devices.length; i < len; i++) {
				if (this.devices[i].value == device) {
					this.analysisForm.deviceType = this.devices[i].type;
					this.analysisForm.dailyStartTime = this.numToTime(this.devices[i].dailyStartTime);
					if (Number(this.devices[i].dailyStartTime) <= this.getNowHour()) {
						this.analysisForm.value = [this.getBeforeAfterDate(1, 'before'), this.getNowFormatDate()];
					} else {
						this.analysisForm.value = [this.getBeforeAfterDate(2, 'before'), this.getNowFormatDate()];
					}
					//this.analysisForm.value = [that.getNowFormatDate()+" "+this.analysisForm.dailyStartTime, this.getNowTime()];
					this.analysisForm.groupsCount = this.devices[i].groupsCount;
					if (this.analysisForm.deviceType == 1 && this.analysisForm.groupsCount > 1) {
						this.getAnalysisGroups(device);
						setTimeout(function () {
							that.getAnalysisSensorsAll(that.analysisForm.sgroup_id);
						}, 1000);
					} else {
						this.getAnalysisSensorsAll(0);
					}
					break;
				}
			}
		},

		changeAnalysisGroup(group) {
			if (this.myChart) {
				this.myChart.dispose();
			}
			this.analysisData = [];
			this.analysisFields = [];
			this.analysisVarSensors = [];
			this.analysisForm.sensorIds = [];
			this.getAnalysisSensorsAll(group);
			//this.getAnalysis(this.analysisForm.device,this.analysisForm.sensorIds.join(','),this.analysisForm.methodsValue.join(','),this.analysisForm.period,this.analysisForm.value.join('~'));
		},

		//callback接收回调参数，展开为true，收起为false；
		//changeHistorySensor(callback,sensor){
		//if(callback){return };}
		changeAnalysisSensor(sensor) {
			var that = this;
			if (this.analysisTimeout) {
				clearTimeout(that.analysisTimeout);
			}
			//下面的做法是防止频繁请求，只在最后一个请求；
			this.analysisTimeout = setTimeout(function () {
				if (sensor.length == that.analysisForm.sensorIds.length) {
					if (that.analysisType != 'bar') {
						that.getAnalysis(that.analysisForm.device, sensor.join(','), that.analysisForm.methodsValue
							.join(','), that.analysisForm.period, that.analysisForm.value.join('~'), that
								.analysisForm.start_time, that.analysisType, that.nowMethod);

					} else {
						that.analysisForm.nowSensors = [];
						that.nowAnalysisSensor = sensor[0];
						for (let i = 0, len = that.analysisVarSensors.length; i < len; i++) {
							for (let n = 0, len2 = sensor.length; n < len2; n++) {
								if (that.analysisVarSensors[i].value == sensor[n]) {
									that.analysisForm.nowSensors.push(that.analysisVarSensors[i])
								}
							}

						}

						that.getAnalysis(that.analysisForm.device, that.analysisForm.nowSensors[0].value, that.analysisForm.methodsValue
							.join(','), that.analysisForm.period, that.analysisForm.value.join('~'), that
								.analysisForm.start_time, that.analysisType, '');


					}
				}
			}, 2000);

		},

		sortOrder(item1, item2) {
			if (item1.order < item2.order) {
				return -1;
			} else if (item1.order > item2.order) {
				return 1;
			} else {
				return 0
			}
		},

		changeAnalysisMethod(methods) {
			//console.log(methods);
			var that = this;
			this.analysisForm.methods = [];
			for (let i = 0, len = methods.length; i < len; i++) {
				for (let n = 0, len2 = this.analysisMethods.length; n < len2; n++) {
					if (methods[i] == this.analysisMethods[n].value) {
						this.analysisForm.methods.push(this.analysisMethods[n]);
					}
				}
			}
			this.nowMethod = this.analysisForm.methods[0].value;
			if (this.analysisForm.methods.length >= 2) {
				let newMethods = Array.from(this.analysisForm.methods);
				this.analysisForm.methods = newMethods.sort(that.sortOrder);
			}
			if (this.analysisType != 'bar') {
				this.getAnalysis(this.analysisForm.device, this.analysisForm.sensorIds.join(','), methods.join(','), this
					.analysisForm.period, this.analysisForm.value.join('~'), this.analysisForm.start_time, this
					.analysisType, this.nowMethod);

			} else {
				this.getAnalysis(this.analysisForm.device, this.nowAnalysisSensor, methods.join(','), this
					.analysisForm.period, this.analysisForm.value.join('~'), this.analysisForm.start_time, 'bar', '');
			}
		},

		changeAnalysisPeriod(period) {
			if (period == '1m') {
				this.analysisForm.value = this.getThreeMonth();
			} else {
				this.analysisForm.value = [this.getNowFormatDate(), this.getNowFormatDate()];
			}
			if (this.analysisType != 'bar') {
				this.getAnalysis(this.analysisForm.device, this.analysisForm.sensorIds.join(','), this.analysisForm
					.methodsValue.join(','), period, this.analysisForm.value.join('~'), this.analysisForm.start_time,
					this.analysisType, this.nowMethod);
			} else {
				this.getAnalysis(this.analysisForm.device, this.nowAnalysisSensor, this.analysisForm
					.methodsValue.join(','), period, this.analysisForm.value.join('~'), this.analysisForm.start_time,
					this.analysisType, this.nowMethod);
			}
		},

		changeAnalysisTime(val) {
			if (this.analysisType != 'bar') {
				this.getAnalysis(this.analysisForm.device, this.analysisForm.sensorIds.join(','), this.analysisForm
					.methodsValue.join(','), this.analysisForm.period, val.join('~'), this.analysisForm.start_time,
					this.analysisType, this.nowMethod);

			} else {
				this.getAnalysis(this.analysisForm.device, this.nowAnalysisSensor, this.analysisForm
					.methodsValue.join(','), this.analysisForm.period, val.join('~'), this.analysisForm.start_time,
					this.analysisType, this.nowMethod);
			}
		},

		changeAnalysisStartTime(val) {
			if (this.analysisType != 'bar') {
				this.getAnalysis(this.analysisForm.device, this.analysisForm.sensorIds.join(','), this.analysisForm
					.methodsValue.join(','), this.analysisForm.period, this.analysisForm.value.join('~'), val, this
					.analysisType, this.nowMethod);
			} else {
				this.getAnalysis(this.analysisForm.device, this.nowAnalysisSensor, this.analysisForm
					.methodsValue.join(','), this.analysisForm.period, this.analysisForm.value.join('~'), val, this
					.analysisType, this.nowMethod);
			}
		},

		async getAnalysisSensorsAll(id) {
			this.analysisForm.sensorIds = [];
			this.analysisVarSensors = [];
			this.analysisForm.nowSensors = [];
			return await this.$http({
				method: 'post',
				url: 'api/sensor/all',
				data: this.analysisForm.deviceType == 1 && this.analysisForm.groupsCount > 1 && this
					.analysisForm.sgroup_id ? {
					"equip_id": this.analysisForm.device,
					"sgroup_id": id,
					"action": 'export'
				} : {
					"equip_id": this.analysisForm.device,
					"action": 'export'
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					for (let i = 0; i < res.data.data.length; i++) {
						let sensor = {
							value: res.data.data[i].id,
							label: res.data.data[i].sensor_name
						}
						this.analysisVarSensors.push(sensor);
					}
					if (this.analysisVarSensors.length) {
						//默认前5个变量，不够5个就是全部；
						if (this.analysisVarSensors.length <= 5) {
							for (let i = 0, len = this.analysisVarSensors.length; i < len; i++) {
								this.analysisForm.sensorIds.push(this.analysisVarSensors[i].value);
								this.analysisForm.nowSensors.push(this.analysisVarSensors[i]);
							}
						} else {
							for (let i = 0; i < 5; i++) {
								this.analysisForm.sensorIds.push(this.analysisVarSensors[i].value);
								this.analysisForm.nowSensors.push(this.analysisVarSensors[i]);
							}
						}
						if (this.analysisType != "bar") {
							this.getAnalysis(this.analysisForm.device, this.analysisForm.sensorIds.join(','),
								this.analysisForm.methodsValue.join(','), this.analysisForm.period, this
									.analysisForm.value.join('~'), this.analysisForm.start_time, this
								.analysisType, this.nowMethod);
						} else {
							this.nowAnalysisSensor = this.analysisForm.nowSensors[0].value;
							this.getAnalysis(this.analysisForm.device, this.nowAnalysisSensor,
								this.analysisForm.methodsValue.join(','), this.analysisForm.period, this
									.analysisForm.value.join('~'), this.analysisForm.start_time, this
								.analysisType, '');
						}
						//下面是默认第一个变量；
						//this.analysisForm.sensorIds=[this.analysisVarSensors[0].value];
						//this.getAnalysis(this.analysisForm.device,this.analysisForm.sensorIds.join(','),this.analysisForm.methodsValue.join(','),this.analysisForm.period,this.analysisForm.value.join('~'));
					}
				} else {
					return false;
				}
				// console.log(that.pointdata[0].icon)
			}).catch(error => {
				console.log(error);
				return false;

			});
		},

		//获取数据分析，暂时不考虑分页
		getAnalysis(id, sensors, methods, period, val, start = "", type = "table", method = "max") {
			var that = this;
			if (!sensors) {
				return;
			}
			if (this.myChart) {
				this.myChart.dispose();
			}
			this.analysisType = type;
			this.analysisFields = [];
			if (type == 'table') {
				this.analysisData = [];
			} else if (type == 'chart') {
				this.loadingAnalysis = true;
				this.analysis_chart.xAxis.data = [];
				this.analysis_chart.series = [];
				this.analysis_chart.legend.data = [];
			} else if (type == 'bar') {
				this.loadingAnalysis = true;
				this.dataset_option.dataset.source = [];
				this.dataset_option.series = [];
			}
			this.$http({
				method: 'post',
				url: 'api/equip/analysis',
				data: {
					"id": id,
					"sensor_id": sensors,
					"functions": methods,
					"group": period,
					"date_range": val,
					"start_time": start

				}
			}).then(res => {
				if (res && res.data.result == "success") {
					//console.log(res.data.data);
					for (let i = 0, len = res.data.data.field.length; i < len; i++) {
						this.analysisFields.push(res.data.data.field[i]);
					}
					if (type == 'table') {
						this.analysisData = res.data.data.values;
						for (let i = 0, len = res.data.data.values.length; i < len; i++) {
							if (this.analysisForm.period != '1d' && this.analysisForm.period != '1m' && res
								.data
								.data.values[i].time) {
								this.analysisData[i].time = res.data.data.values[i].time.substr(5, 11);
							} else {
								this.analysisData[i].time = res.data.data.values[i].time;
							}
						}
					} else if (type == 'chart') {
						for (let i = 0, len = res.data.data.values.length; i < len; i++) {
							if (this.analysisForm.period != '1d' && this.analysisForm.period != '1m' && res
								.data
								.data.values[i].time) {
								this.analysis_chart.xAxis.data.push(res.data.data.values[i].time.substr(5,
									11));
							} else {

								this.analysis_chart.xAxis.data.push(res.data.data.values[i].time);
							}
						}
						for (let n = 0, len2 = this.analysisFields.length; n < len2; n++) {
							this.analysis_chart.legend.data.push(that.analysisFields[n]);
							this.analysis_chart.series.push({
								name: that.analysisFields[n],
								type: 'line',
								data: [],
								itemStyle: {
									normal: {
										color: that.lineColor[n]
									}
								},
								smooth: true
							});
						}
						for (let n = 0, len3 = this.analysisFields.length; n < len3; n++) {
							for (let i = 0, len4 = res.data.data.values.length; i < len4; i++) {
								this.analysis_chart.series[n].data.push(res.data.data.values[i][method + '_' +
									n
								])
							}
							//经测试，不使用单个unshift(),而使用整体reverse(),是因为后者效率高,更快;
							//而且unshift方法比push方法慢100倍,reverse性能最高;
							//数据分析不用反向
							//this.analysis_chart.series[n].data.reverse();
						}
						setTimeout(function () {
							//经测试，不使用单个unshift(),而使用整体reverse(),是因为后者效率高,更快;
							//而且unshift方法比push方法慢100倍,reverse性能最高;
							//数据分析不用反向
							//that.analysis_chart.xAxis.data.reverse();
							var chart = that.$refs.analysisChart;
							//that.myChart = echarts.init(chart,'dark');//'dark'表示深色模式,深色背景
							that.myChart = echarts.init(chart);
							that.myChart.setOption(that.analysis_chart);
							window.addEventListener("resize", () => {
								that.myChart.resize();
							})
							that.loadingAnalysis = false;

						}, 1000)
					} else if (type == 'bar') {
						this.nowAnalysisSensor = sensors;
						let methodArr = ['method'];
						for (let i = 0, len = this.analysisForm.methods.length; i < len; i++) {
							methodArr.push(this.analysisForm.methods[i].label);
							this.dataset_option.series.push({ type: 'bar', itemStyle: { color: that.lineColor[i] } });
						}
						this.dataset_option.dataset.source.push(methodArr);
						for (let i = 0, len = res.data.data.values.length; i < len; i++) {
							if (this.analysisForm.period != '1d' && this.analysisForm.period != '1m' && res
								.data
								.data.values[i].time) {
								this.dataset_option.dataset.source[i + 1] = [res.data.data.values[i].time.substr(5,
									11)];
							} else {
								this.dataset_option.dataset.source[i + 1] = [res.data.data.values[i].time];
							}
							for (let n = 0, len2 = this.analysisForm.methods.length; n < len2; n++) {
								this.dataset_option.dataset.source[i + 1].push(res.data.data.values[i][this.analysisForm.methods[n].value + "_0"])

							}
						}
						//console.log(this.dataset_option);
						setTimeout(function () {
							//经测试，不使用单个unshift(),而使用整体reverse(),是因为后者效率高,更快;
							//而且unshift方法比push方法慢100倍,reverse性能最高;
							//数据分析不用反向
							//that.analysis_chart.xAxis.data.reverse();
							var chart = that.$refs.analysisBar;
							//that.myChart = echarts.init(chart,'dark');//'dark'表示深色模式,深色背景
							that.myChart = echarts.init(chart);
							that.myChart.setOption(that.dataset_option);
							window.addEventListener("resize", () => {
								that.myChart.resize();
							})
							that.loadingAnalysis = false;

						}, 1000)

					}
				}
			}).catch(error => {
				console.log(error);
			});
		},


		sendOutAnalysis() {
			var that = this;
			window.location.href = that.baseurl + 'api/equip/downloadAnalysis?id=' + that.analysisForm.device
				+ '&sensor_id=' + that.analysisForm.sensorIds.join(',') + '&functions=' + that.analysisForm.methodsValue.join(',') + '&group=' + that.analysisForm.period + '&date_range=' + that.analysisForm.value.join('~') + '&token=' + localStorage.getItem('attoken');
		},

		//数据分析表位合计函数，参数{columns,data}
		getSummary(param) {
			let {
				columns,
				data
			} = param;
			let sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '合计';
					return;
				}
				if (index === 1) { //时间不累加
					sums[index] = '/';
					return;
				}
				const values = data.map(item => Number(item[column.property]));
				if (!values.every(value => isNaN(value))) {
					sums[index] = values.reduce((prev, curr) => {
						const value = Number(curr);
						if (!isNaN(value)) {
							return prev + curr;
						} else {
							return prev;
						}
					}, 0);
					sums[index] = sums[index].toFixed(2);
					sums[index] += ''; //单位
				} else {
					sums[index] = '/'; //非数值
				}
			});

			return sums;
		},


		//示功图
		// changePowerDevice(device){
		// 	var that=this;
		// 	//this.analysisData = [];
		// 	//this.analysisFields = [];
		// 	this.powerVarSensors=[];
		// 	this.powerForm.sensorIds=[];
		// 	for(let i=0,len=this.devices.length;i<len;i++){
		// 		if(this.devices[i].value==device){
		// 		    this.powerForm.deviceType=this.devices[i].type;
		// 			this.powerForm.slavesCount = this.devices[i].slavesCount;
		// 		    if(this.powerForm.deviceType==1 && this.powerForm.slavesCount>1){
		// 			    this.getPowerSlaves(device);
		// 				setTimeout(function(){
		// 					that.getPowerSensorsAll(that.powerForm.slave_id);
		// 				},1000);
		// 			}else{
		// 				this.getPowerSensorsAll(0);
		// 			}
		// 			break;
		// 		}
		// 	}
		// },

		// changePowerSlave(slave){
		// 	//this.analysisData = [];
		// 	//this.analysisFields = [];
		// 	this.powerVarSensors=[];
		// 	this.powerForm.sensorIds=[];
		// 	this.getPowerSensorsAll(slave);
		// 	//this.getAnalysis(this.analysisForm.device,this.analysisForm.sensorIds.join(','),this.analysisForm.methodsValue.join(','),this.analysisForm.period,this.analysisForm.value.join('~'));
		// },

		// //callback接收回调参数，展开为true，收起为false；
		// //changeHistorySensor(callback,sensor){
		// 	//if(callback){return };}
		// changePowerSensor(sensor){
		// 	var that=this;
		// 	if(this.powerTimeout){
		// 		clearTimeout(that.powerTimeout);
		// 	}
		// 	//下面的做法是防止频繁请求，只在最后一个请求；
		// 	this.powerTimeout=setTimeout(function(){
		// 		if(sensor.length==that.powerForm.sensorIds.length){
		// 		    that.getPower(that.powerForm.device,sensor.join(','));
		// 		}
		// 	},2000);

		// },

		getPower() {
			var that = this;
			this.powerLoading = false;
			var powerChart = this.$refs.powerChartLive;
			this.myPowerChartLive = echarts.init(powerChart);
			//this.dataX=[0,1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1,0];
			//this.dataY=[1,3,4,5,5,5,5,5,5,5,5,4,2,1,1,1,1,1,1,1,1];
			var i = 0;
			this.dataY = [
				[0, 1],
				[1, 3],
				[2, 4],
				[3, 5],
				[4, 5],
				[5, 5],
				[6, 5],
				[7, 5],
				[8, 5],
				[9, 5],
				[10, 5],
				[9, 4],
				[8, 2],
				[7, 1],
				[6, 1],
				[4, 1],
				[3, 1],
				[2, 1],
				[1, 1],
				[0, 1]
			];
			//var data=[[0,2],[1,4],[2,5],[3,6],[4,6],[5,6],[6,6],[7,6],[8,6],[9,6],[10,6],[9,5],[8,3],[7,2],[6,2],[4,2],[3,2],[2,2],[1,2],[0,2]];
			this.powerTimer = setInterval(function () {
				that.power_option.series[0].data.push(that.dataY[i]);
				//that.power_option.series[1].data.push(data[i]);
				i++;
				that.myPowerChartLive.setOption(that.power_option);
				if (i == that.dataY.length) {
					clearInterval(that.powerTimer);
					that.deletePowerChart();
					that.getPower();
				}
			}, 1000)
			window.addEventListener("resize", () => {
				that.myPowerChartLive.resize();
			})
		},

		deletePowerChart() {
			//var that=this;
			this.power_option.series[0].data = [];
			//this.power_option.series[1].data = [];
			//this.power_option.xAxis.data = [];
			//this.dataX = [];
			//this.dataY = [];
			//this.myPowerChartLive.setOption(that.power_option);
		},

		// quickRead(){
		//    var that=this;
		//    this.$http({
		//    	method: 'post',
		//    	url: 'equip/quickRead',
		//    	data: {
		//    		"id":that.id,

		//    	}
		//    }).then(res => {
		//    	if (res && res.data.result == "success") {
		//    		if(){
		//    		   this.$message({
		//    			  message: '快速读取成功！',
		//    			  type: 'success',
		//    			  center:true
		//    			});

		//    		}
		//    	}
		//    	// console.log(that.pointdata[0].icon)
		//    }).catch(error => {
		//    	console.log(error);

		//    });
		// },

		//上下线相关函数
		getLines(num, size, equip, val) {
			var that = this;
			if (!equip || !equip.length) {
				equip = [0];
			}
			this.lineData = [];
			this.$http({
				method: 'post',
				url: 'api/equip/conLogs',
				data: {
					"limit": size,
					"page": num,
					"product_id": this.optionId,
					"id": equip.join(','),
					"log_time": val

				}
			}).then(res => {
				if (res && res.data.result == "success") {
					this.lineData = res.data.data;
					this.queryParams_4.total = res.data.count;
				}
			}).catch(error => {

				console.log(error)
			});
		},

		getAllLines() {
			this.lineForm.device = [];
			this.getLines(this.queryParams_4.pageNo, this.queryParams_4.pageSize, [0], this.lineForm.value.join('~'));
		},

		//设备地图相关函数
		fullScreen() {
			var that = this;
			this.mapFullscreen = !this.mapFullscreen;
			if (this.mapFullscreen) {
				that.$refs.content.removeAttribute("id", "content");
				that.$refs.content.style.position = "fixed";
				that.$refs.content.style.top = 0;
				that.$refs.content.style.left = 0;
				that.$refs.content.style.right = 0;
				that.$refs.content.style.bottom = 0;
				that.$refs.content.style.zIndex = 100;
				that.$refs.mapbtn.style.bottom = "0.5rem";
				setTimeout(function () {
					that.$refs.content.style.width = window.screen.width + "px";
					that.$refs.content.style.height = window.screen.height + "px";
				}, 500);
				that.$refs.search.style.position = "fixed";
			} else {
				that.$refs.content.setAttribute("id", "content");
				that.$refs.content.style.position = "relative";
				that.$refs.content.style.top = 0;
				that.$refs.content.style.left = 0;
				that.$refs.content.style.zIndex = 1;
				that.$refs.content.style.width = "99.8%";
				that.$refs.mapbtn.style.bottom = "0.6rem";
				that.$refs.search.style.position = "absolute";
				setTimeout(function () {
					that.$refs.content.style.height = "calc(100vh - 1.45rem)"
				}, 1000)
			}
		},

		getEquipMap(id = 0, isOn = '', isAlarm = '', isfirst = true) {
			var that = this;
			this.equipdata = [];
			this.markers = [];
			this.$http({
				method: 'post',
				url: 'api/equip/all',
				data: {
					"product_id": id,
					"is_on": isOn,
					"is_alarm": isAlarm
				}
			}).then(res => {
				//console.log(res.data.data);
				if (res && res.data.result == "success") {
					this.equipdata = res.data.data;
					for (let i = 0, len = this.equipdata.length; i < len; i++) {
						this.$set(this.equipdata[i], 'stateIcon', '');
						if (this.equipdata[i].is_on == 0) {
							this.equipdata[i].stateIcon =
								"https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/down.png";
						} else if (this.equipdata[i].is_on == 1) {
							if (this.equipdata[i].is_alarm == 1) {
								this.equipdata[i].stateIcon =
									"https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/alarmOne.gif";
							} else {
								this.equipdata[i].stateIcon =
									"https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/online.png";
							}
						}
						if (i == len - 1) {
							break;
						}
					}
					if (isfirst) {
						this.showMap();
					} else {
						this.addManyMarker();
						setTimeout(function () {
							that.map.setFitView();
						}, 1000)
					}
					//this.mapLoading = false;
				} else {
					this.showMap();
				}

			}).catch(error => {

				console.log(error);
			});
		},

		changeMapShow(type) {
			this.map.clearMap();
			if (type == 1) {
				this.mapForm.state = 0;
				this.getEquipMap(this.optionId, '', '', false);
			} else {
				this.getGraspEquip(this.optionId);
			}
		},

		changeGraspEquipOrRange() {
			this.map.clearMap();
			this.getGraspArray(this.mapForm.equip_id);
		},

		//获取所有开启轨迹的设备
		getGraspEquip(id) {
			this.mapForm.equip_id = "";
			this.graspEquips = [];
			this.$http({
				method: 'post',
				url: 'api/equip/all',
				data: {
					"product_id": id,
					"gps_path": 1
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					if (res.data.data.length) {
						for (let i = 0, len = res.data.data.length; i < len; i++) {
							let device = {
								value: res.data.data[i].id,
								label: res.data.data[i].equip_name
							}
							this.graspEquips.push(device);
						}
						this.mapForm.equip_id = this.graspEquips[0].value;
						this.getGraspArray(this.graspEquips[0].value);
					} else { //这是判断只有组态没有设备的情况
						this.mapForm.equip_id = "";
						this.$message({
							message: "当前项目暂时没有开启轨迹的设备!",
							type: "info",
							offset: 300,
							center: true
						});
						return false;
					}
				}
			}).catch(error => {
				console.log(error);
				return false;
			});
		},

		//坐标轨迹点拆分与绘制
		// splitGraspArray(arr,max=499){
		// 	if(arr.length<=max){
		// 		this.showGrasp(arr,1,1);
		// 	}else{
		// 		//余数
		// 		let remainder=arr.length%max;
		// 		//console.log(remainder);
		// 		//次数，如果不是刚好整数次就向上取整
		// 		let times=remainder==0?arr.length/max:Math.ceil(arr.length/max);
		// 		//console.log(times);
		// 		for(let t=1;t<=times;t++){
		// 			let newArr=[];
		// 			let start=t==1?0:(t-1)*max-1;
		// 			let end=t<times?max*t-1:arr.length-1;
		// 			//因为上一次的重点是下一次的起点所以使用<=才能无缝连接
		// 			for(let i=start;i<=end;i++){
		// 				newArr.push(arr[i]);
		// 			}
		// 			this.showGrasp(newArr,t,times);
		// 		}
		// 	}
		// },

		//优化的坐标轨迹点拆分与绘制
		splitGraspArray(arr, max = 500) {
			if (arr.length <= max) {
				this.showGrasp(arr, 1, 1);
			} else {
				//由于轨迹无缝衔接每次的终点是下次的起点，所以实际只新画了max-1个点
				//虽然第一次和最后一次不是这样但不影响结果
				//实际新画数
				let newPoints = max - 1;
				//余数
				let remainder = arr.length % newPoints;
				//console.log(remainder);
				//次数，如果不是刚好整数次就向上取整
				let times = remainder == 0 ? arr.length / newPoints : Math.ceil(arr.length / newPoints);
				//console.log(times);
				for (let t = 1; t <= times; t++) {
					let newArr = [];
					//上次的终点是下次的起点所以是t-1；
					let start = (t - 1) * newPoints;
					let end = t < times ? t * newPoints : arr.length - 1;
					//因为上一次的重点是下一次的起点所以使用<=才能无缝连接
					for (let i = start; i <= end; i++) {
						newArr.push(arr[i]);
					}
					this.showGrasp(newArr, t, times);
				}
			}
		},


		//获取轨迹系列坐标
		getGraspArray(id) {
			var that = this;
			if (!id) {
				return false;
			}
			this.$http({
				method: 'post',
				url: 'api/equip/getGpsPath',
				data: {
					"id": id,
					"time_range": this.mapForm.time_range.join('~')
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					if (res.data.data.length) {
						// 后台已经做了坐标为空过滤，这里不再过滤
						this.splitGraspArray(res.data.data, 500);
						setTimeout(function () {
							that.showStartEndMarker();
						}, 1000)
					} else {
						this.$message({
							message: "当前暂时没有此设备的轨迹,你可以尝试增大时间范围!",
							type: "info",
							offset: 300,
							center: true
						});
					}
				}
			}).catch(error => {
				console.log(error);
				return false;
			});
		},
		//显示轨迹函数,t表示当前是第几次拆分,times表示总次数
		showGrasp(pathParam, t, times) {
			var that = this;
			//轨迹和轨迹纠偏测试
			var graspRoad;
			//总路程
			this.distance = 0;
			//sp速度(km/h)，ag角度，这两个可以为0，但不能没有
			//ag是与正北方向的顺时针夹角，[ 0, 360 ]
			//tm以秒为单位，第一个采集点的tm值从1970年0点开始，其他采集点为与第一个采集点时间的差值
			//从第二个点开始，tm应该是递增的；
			//用纠偏，sp,ag,tm三者必须有，不用纠偏三者都可以没有
			//以下是纠偏前的路径
			// var path1 = [];
			// for(var i=0;i<pathParam.length;i+=1){
			//     path1.push([pathParam[i].x,pathParam[i].y])
			// }
			// var oldLine = new AMap.Polyline({
			//     path:path1,
			//     strokeWeight:8,
			//     strokeOpacity:1,
			//     strokeColor:'red'
			// })
			// this.map.add(oldLine);
			// that.map.setFitView();
			//以下是纠偏后的路径
			if (!graspRoad) {
				graspRoad = new AMap.GraspRoad()
			}
			graspRoad.driving(pathParam, function (error, result) {
				if (!error) {
					var path2 = [];
					var newPath = result.data.points;
					//获取纠偏后的第一点(起点坐标)
					if (t == 1) {
						that.startPoint = [newPath[0].x, newPath[0].y];
					}
					//获取纠偏后的最后点(终点坐标)
					if (t == times) {
						that.endPoint = [newPath[newPath.length - 1].x, newPath[newPath.length - 1].y];
					}
					//官方文档说distance(总距离，单位m)与data平级是错误的，实际上distance属于data的属性，与points平级
					//console.log(result.data.distance);
					that.distance = result.data.distance;
					//console.log(distance);
					for (var i = 0; i < newPath.length; i += 1) {
						path2.push([newPath[i].x, newPath[i].y]);
					}
					var newLine = new AMap.Polyline({
						path: path2,
						strokeWeight: 8,
						strokeOpacity: 0.8,
						strokeColor: '#0091ea',
						//是否延路径显示白色方向箭头
						showDir: true
					})
					that.map.add(newLine);
					that.map.setFitView();
				}
			})
		},

		//标记起点和终点还有路程
		showStartEndMarker() {
			var that = this;
			var startMarker = new AMap.Marker({
				map: that.map,
				icon: new AMap.Icon({
					size: [32, 32],
					imageSize: [32, 32],
					image: '../../static/local.png'
				}),
				//content:"<div style='width:40px;height:24px;line-height:24px;color:#fff;font-size:14px;background-color:rgba(0,0,0,0.5)'>起点<div>",
				position: that.startPoint,
				offset: new AMap.Pixel(-16, -32),
				//offset: new AMap.Pixel(7,-31),
				label: {
					content: '起点',
					offset: new AMap.Pixel(-8, -20),
					direction: "right"
				},
				// title:'起点',
				// offset: new AMap.Pixel(8,-8)
			});

			this.map.add(startMarker);
			var str = '终点　总路程:' + this.distance + '米';
			var endMarker = new AMap.Marker({
				map: that.map,
				icon: new AMap.Icon({
					size: [32, 32],
					imageSize: [32, 32],
					image: '../../static/local.png'
				}),
				position: that.endPoint,
				//这里的宽度只能识别具体宽度，不能识别auto，还有min-width和max-width;
				//content:"<div style='width:200px;height:24px;line-height:24px;color:#fff;font-size:14px;background-color:rgba(0,0,0,0.5)'>"+str+"<div>",
				offset: new AMap.Pixel(-16, -32),
				label: {
					content: str,
					offset: new AMap.Pixel(-8, -20),
					direction: "right"
				}
				// title:'起点',
				// offset: new AMap.Pixel(8,-8)
			});
			this.map.add(endMarker);
		},

		changeMapDeviceState(state) {
			this.map.clearMap();
			switch (state) {
				case 0: //全部
					this.getEquipMap(this.optionId, '', '', false);
					break;
				case 1: //在线正常
					this.getEquipMap(this.optionId, 1, 0, false);
					break;
				case 2: //在线报警
					this.getEquipMap(this.optionId, 1, 1, false);
					break;
				case 3: //离线
					this.getEquipMap(this.optionId, 0, '', false);
					break;
				default:
					this.getEquipMap(this.optionId, '', '', false);
					break;

			}
		},

		//center表示是否使当前点居中显示；
		getInfoAndAddress(id, center = true) {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/equip/info',
				data: {
					"id": id
				}
			}).then(res => {
				if (res && res.data.result == "success") {

					//console.log(res.data.data);
					var data = res.data.data;
					var zIndex = res.data.data.geo_coord;
					// var hei = data.liquid_level <= data.equip_conf.height ? data.liquid_level * (1 / data.equip_conf.height) * 100 :
					// 	100;
					var tong =
						`<div id="waterBox" style="width:400px;height:auto;position:relative;background-color:rgba(0,0,0,0.8)">
							<div
							style="width:100%;
							position:relative;
							color:white;
							text-align:left;
							height:auto;
							padding:0;
							line-height:26px;">
							<div
								style="font-size:16px;width:100%;
								overflow:hidden;
								white-space: nowrap;
			                    text-overflow: ellipsis;">
								    <span>设备名称：</span><span style="display:inline-block;" id="device" title="">` +
						data.equip_name +
						`<span>
								</div>
								<div
								style="font-size:16px;width:100%;"><span>设备编码：</span><span style="display:inline-block;" id="code" title="">` +
						data.equip_code +
						`</span></div>
							<div style="font-size:16px;width:100%;max-height:53px;line-height:26px;white-space: wrap;">设备地址：` +
						data.geo_name + `</div>
								<div style="font-size:16px;width:100%;"><span>添加时间：</span><span style="display:inline-block;" id="project">` +
						data.add_time + `</span></div>
							<div>
						</div>`;
					that.infoWindow = new AMap.InfoWindow({
						offset: new AMap.Pixel(0, -24),
						content: tong
					});
					that.infoWindow.open(that.map, zIndex);
					if (center) {
						that.map.setCenter(zIndex);
						that.map.setZoom(20);
					}
				}
			}).catch(error => {
				console.log(error)
			});

		},


		addMarker(point, data) {
			var that = this;
			var status = "";
			if (data.is_on) {
				status = data.is_alarm ? '报警' : '正常';
			} else {
				status = '离线';
			}
			var marker = new AMap.Marker({
				map: that.map,
				icon: new AMap.Icon({
					size: [26, 32],
					imageSize: [26, 32],
					image: data.stateIcon
				}),
				position: point,
				offset: new AMap.Pixel(-13, -32),
				label: {
					//content: data.equip_name + "　所在项目:" + data.product_name + "　状态:"+status,
					//content: data.equip_name + '(' + status + ')',
					content: data.equip_name,
					offset: new AMap.Pixel(-4, -20),
					direction: "right"
				}
				//title:data.equip_name + "　所在项目:" + data.product_name + "　状态:"+status,
				//offset: new AMap.Pixel(-13,-32)
			});
			marker.on("click", function () {
				that.getInfoAndAddress(data.id, false);
			});
			//setTimeout(function() {
			this.markers.push(marker);
			this.map.add(marker);
			//marker.setMap(that.map);
			//}, 500);
			//清除点击事件弹出对话框之后，地图会跟随鼠标移动的问题；
			// marker.on("mousemove", function() {
			//     event.stopPropagation();
			//     event.preventDefault();
			//     event.stopImmediatePropagation();

			// });
			//     marker.on("click", function() {
			//         that.outerVisible = true;
			//         clearInterval(that.timer);
			//         if (that.Socket) {
			//             that.Socket.close();
			//         }
			//         setTimeout(function() {
			//             if (that.pointdata.length <= 6) {
			//                 that.$refs.databox.style.height = "5rem";
			//             } else {
			//                 that.$refs.databox.style.height = "7.5rem";
			//             }
			//         }, 1000);
			//         that.eqid = data.id;
			//         that.deviceType = data.type;
			//         that.slavesCount = data.slaves_count;
			//         if (data.type == 1 && data.slaves_count > 1) {
			//             that.getSlave(data.id);
			//         } else {
			//             that.getView(data.id);
			//         }
			//         that.isOn = data.is_on;
			//         const wsUrl = "ws://api.ykiot.net:53010/";
			//         that.Socket = new WebSocket(wsUrl);
			//         if (that.Socket.readyState !== WebSocket.OPEN) {
			//             that.Socket.onopen = function() {
			//                 setTimeout(function() {
			//                     var pingData = {
			//                         action: "ping",
			//                         data: that.deviceType == 1 && that.slavesCount > 1 ? {
			//                             user_id: localStorage.getItem("userId"),
			//                             slave_id: that.slaveId,
			//                             token: localStorage.getItem("attoken")

			//                         } : {
			//                             user_id: localStorage.getItem("userId"),
			//                             equip_id: that.eqid,
			//                             token: localStorage.getItem("attoken")

			//                         }
			//                     };
			//                     that.Socket.send(JSON.stringify(pingData));
			//                     if (data.type == 1 && data.slaves_count > 1) {
			//                         that.refreshData(that.slaveId);
			//                     } else {
			//                         that.refreshData(that.eqid);
			//                     }
			//                     //that.Socket.onmessage = that.onMessage;
			//                     that.timer = setInterval(function() {
			//                         that.Socket.send(JSON.stringify(pingData));
			//                     }, 30000);
			//                 }, 600);

			//                 console.log("连接成功");
			//             };
			//         }
			//         that.Socket.onerror = that.onError;
			//         that.Socket.onmessage = that.onMessage;
			//         //that.Socket.onclose=that.onClose;
			//         that.equip = data.equip_name;
			//     });
		},

		addManyMarker() {
			var that = this;
			this.lostDevice = [];
			//this.points = [];
			if (this.equipdata.length) {
				for (var i = 0; i < this.equipdata.length; i++) {
					if (this.equipdata[i]) {
						if (
							this.equipdata[i].geo_coord &&
							Number(that.equipdata[i].geo_coord[0]) > 70 &&
							Number(that.equipdata[i].geo_coord[0]) < 140 &&
							Number(that.equipdata[i].geo_coord[1]) > 1 &&
							Number(that.equipdata[i].geo_coord[1]) < 60
						) {
							var point = [
								that.equipdata[i].geo_coord[0],
								that.equipdata[i].geo_coord[1]
							];
							//that.points.push(point);
							that.addMarker(point, that.equipdata[i]);
						} else {
							if (that.equipdata[i].type != 3) {
								that.lostDevice.push(that.equipdata[i].equip_name);
							}
						}
					}
				}
				if (that.lostDevice[0]) {
					//如果不延时，将于上面的数据点报警产生重叠
					setTimeout(function () {
						that.$notify({
							title: "设备定位报警提示:",
							dangerouslyUseHTMLString: true,
							message: '<div style="display:block;text-align:left;max-height:260px;width:220px;overflow:auto;line-height:20px;margin:0 auto;padding-right:10px;text-indent:0;padding-left:0;position:relative;z-index:3;">以下设备(共' +
								that.lostDevice.length +
								'台)，坐标异常，未在地图上标注，请查看位置!</br><span style="color:red;">' +
								that.lostDevice.join("</br>") +
								"</span></div>",
							duration: 0,
							offset: 180
						});
					}, 500);
				}
			} else {
				that.$message({
					message: "暂时没有可以标注的设备!",
					type: "warn",
					offset: 300,
					center: true
				});
				that.map.setZoomAndCenter(5, "西安");
			}
		},
		showMap() {
			var that = this;

			// setTimeout(function() {
			that.map = new AMap.Map("content", {
				resizeEnable: true,
				expandZoomRange: true,
				enableHighAccuracy: true
				//下面为图层设置
				//layers: [new AMap.TileLayer.Satellite(),new AMap.TileLayer.RoadNet()]
			});
			//设置地图主题颜色
			//可选的值有：normal(默认),dark,light,whitesmoke,fresh,grey,graffiti,macaron,blue,darkblue,wine；
			var styleName = "amap://styles/blue";
			that.map.setMapStyle(styleName);
			//设置主题结束

			// that.map.hotspotover=function(){
			//    event.stopPropagation();
			//    event.preventDefault();
			//    event.stopImmediatePropagation();
			// }
			AMap.plugin(["AMap.Scale", "AMap.MapType", "AMap.GraspRoad"], function () {
				// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
				//that.map.addControl(new AMap.ToolBar());

				// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
				that.map.addControl(new AMap.Scale());
				//轨迹纠偏插件
				that.map.addControl(new AMap.GraspRoad());
				// 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
				//map.addControl(new AMap.OverView({isOpen:true}));

				// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
				that.map.addControl(new AMap.MapType());

				// 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
				// map.addControl(new AMap.Geolocation());
			});

			//that.showmap = true;
			//that.hiddeTip();
			that.addManyMarker();
			setTimeout(function () {
				that.map.setFitView();
			}, 1000);
			// if (window.screen.height == 1200 && window.screen.width == 1920) {
			// 	that.$refs.content.removeAttribute("id", "content");
			// } else {
			// 	that.$refs.content.style.height = 13.5 + "rem";
			// }

			// window.document.getElementById("mapbtn").style.display = "inline-block";
			//}, 1000);

		},

		// 		showImage(id){
		// 			this.$http({
		// 			method: 'post',
		// 			url: 'api/product/info',
		// 			data: {
		// 				"id": id

		// 				}
		// 			}).then(res => {
		//                      this.productInfo.product_image = this.baseurl + res.data.data.product_image;

		// 				}

		// 			}).catch(error => {
		// 				console.log(error);

		// 			});
		// 		},

		//以下是组态相关函数
		//图纸整体刷新
		refreshViewAndData() {
			var stageId = localStorage.getItem("stageId") ? localStorage.getItem("stageId") : this.viewForm.stage_id;
			document.getElementById("mainIframe").src = 'static/optionZT/client_view.html?stageId=' + stageId;
			//this.refreshView();
		},
		//只刷新组态数据的函数
		refreshViewData() {
			this.$http({
				method: 'post',
				url: 'api/draw/refresh',
				data: {
					'id': this.viewForm.stage_id
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					this.$message({
						type: 'info',
						message: '图纸数据已刷新'
					});
				}
			}).catch(error => {
				console.log(error);


			});
		},

		getViewAll(id) {
			var that = this;
			this.showView = true;
			this.viewList = [];
			this.viewForm.view_id = '';
			this.viewForm.stage_id = '';
			this.$http({
				method: 'post',
				async: true,
				url: 'api/view/all',
				data: {
					"product_id": id,
					"visit_allow": "all,pc",
					"user_id": localStorage.getItem("at_userId")
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					if (res.data.data.length) {
						for (var i = 0, len = res.data.data.length; i < len; i++) {
							var view = {
								value: res.data.data[i].id,
								label: res.data.data[i].view_name
							}
							this.viewList.push(view);
						}
						if (this.liveData) {
							this.viewForm.view_id = this.liveData.view_id || this.viewList[0].value;
						} else {
							this.viewForm.view_id = this.viewList[0].value;
							this.nowView = this.viewList[0].label;
						}
						this.getStageAll(this.viewForm.view_id);
					} else {
						this.viewForm.view_id = '';
						this.viewForm.stage_id = '';
						//document.getElementById("mainIframe").src="";
					}
				}
			}).catch(error => {
				console.log(error);

			});

		},


		//获取图纸函数
		getStageAll(id) {
			var that = this;
			this.drawList = [];
			this.$http({
				method: 'post',
				url: 'api/draw/all',
				data: {
					'view_id': id
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					for (var i = 0, len = res.data.data.length; i < len; i++) {
						var draw = {
							value: res.data.data[i].id,
							label: res.data.data[i].draw_name
						}
						this.drawList.push(draw);
					}

					this.viewForm.stage_id = this.drawList[0].value;

					localStorage.setItem('stageId', that.viewForm.stage_id);
					//this.drawName=this.drawList[0].label;

					//this.refreshView();

				}
			}).catch(error => {
				console.log(error);
				this.drawList = [];

			});
		},

		//组态下拉框改变事件
		changeView(view) {
			this.getStageAll(view);
		},

		//图纸下拉框改变事件
		changeViewStage(stage) {
			localStorage.setItem('stageId', stage);
		},

		//全屏时，点击组态列表改变事件
		changeStage(item, event) {
			var that = this;
			if (event.target.innerText == item.label) {
				this.nowView = item.label;
			}
			this.viewForm.view_id = item.value;
			this.changeView(item.value);
			// setTimeout(function () {
			// 	that.$refs.mainIframe.removeAttribute("class", "fram");
			// 	that.$refs.mainIframe.removeAttribute("class", "fram_2");
			// 	that.$refs.mainIframe.style.position = "fixed";
			// 	that.$refs.mainIframe.style.top = 0;
			// 	that.$refs.mainIframe.style.left = 0;
			// 	that.$refs.mainIframe.style.zIndex = 100;
			// 	//that.$refs.mainIframe.setAttribute("frameborder","no");
			// 	//that.$refs.mainIframe.setAttribute("border",'0');
			// 	that.$refs.mainIframe.style.width = window.screen.width + 'px';
			// 	that.$refs.mainIframe.style.height = window.screen.height + 'px';
			// 	that.$refs.mainIframe.style.backgroundColor = "#fff";

			// }, 500)
			setTimeout(function () {
				that.fullList = false;
			}, 5000)
		},

		// showFullList() {
		// 	var that = this;
		// 	this.fullList = !this.fullList;
		// 	clearTimeout(that.viewListTimer);

		// },

		// keepFullList() {
		// 	var that = this;
		// 	this.fullList = true;
		// 	clearTimeout(that.viewListTimer);
		// },

		// closeFullList() {
		// 	var that = this;
		// 	//this.fullList = false;
		// 	//clearTimeout(that.viewListTimer);
		// 	this.viewListTimer = setTimeout(function() {
		// 		that.fullList = false;
		// 	}, 3000);
		// },

		changeInterval(interval) {
			if (Number(interval) < 30) {
				this.viewForm.interval = 30;
			} else if (Number(interval) > 600) {
				this.viewForm.interval = 600;
			}
		},

		swiperStage() {
			this.dialogSwiperVisible = true;
		},

		showTrunView(interval = 60) {
			var that = this
			this.isPlay = true;
			this.$message({
				type: 'info',
				message: '组态图纸正在轮播...'
			});
			let time = Number(interval) || 60;
			this.swiperTimer = setInterval(function () {
				that.viewForm.stage_id = that.drawList[that.start].value;
				localStorage.setItem("stageId", that.viewForm.stage_id);
				that.start++;
				if (that.start == that.drawList.length) {
					that.start = 0;
				}
			}, time * 1000);
			this.dialogSwiperVisible = false;
		},

		stopTrunView() {
			var that = this;
			this.isPlay = false;
			this.$message({
				type: 'info',
				message: '组态图纸轮播已停止'
			});
			clearInterval(that.swiperTimer);
			this.viewForm.stage_id = this.drawList[0].value;
			localStorage.setItem("stageId", that.viewForm.stage_id);
		},

		fullViewScreen() {
			var that = this;
			this.isFullViewscreen = !this.isFullViewscreen;
			if (this.isFullViewscreen) {
				//使用帧动画避免抖动
				//requestAnimationFrame(function() {
				that.$refs.mainIframe.removeAttribute("class", "fram");
				that.$refs.mainIframe.style.position = "fixed";
				that.$refs.mainIframe.style.top = 0;
				that.$refs.mainIframe.style.left = 0;
				that.$refs.mainIframe.style.zIndex = 100;
				//that.$refs.mainIframe.setAttribute("frameborder", "no");
				//that.$refs.mainIframe.setAttribute("border", '0');
				that.$refs.mainIframe.style.width = window.screen.width + 'px';
				that.$refs.mainIframe.style.height = window.screen.height + 'px';
				that.$refs.mainIframe.style.backgroundColor = "#fff";
				//});
			} else {
				//requestAnimationFrame(function() {
				that.fullList = false;
				console.log("full");
				that.$refs.mainIframe.style.position = "relative";
				that.$refs.mainIframe.style.top = 0;
				that.$refs.mainIframe.style.left = 0;
				that.$refs.mainIframe.style.zIndex = 1;
				that.$refs.mainIframe.setAttribute("class", "fram");
				that.$refs.mainIframe.style.width = "100%";
				setTimeout(function () {
					that.$refs.mainIframe.style.height = "calc(100vh - 1.2rem)";
				}, 1000)
				//that.$refs.mainIframe.setAttribute("frameborder", "no"); //1表示为三维边框，0不是三维，no表示不显示边框，yes显示默认边框
				//that.$refs.mainIframe.setAttribute("border", "0");
				//});

			}
		},

		//以下是所有分页函数
		handleSizeChange(val) {
			this.queryParams.pageSize = val;
			if (this.historyForm.deviceType == 1 && this.historyForm.groupsCount > 1) {
				this.getHistory(this.queryParams.pageNo, val, this.historyForm.device, this.historyForm.sgroup_id, this
					.historyForm.sensorIds.join(','), this.historyForm.value.join('~'));
			} else {
				this.getHistory(this.queryParams.pageNo, val, this.historyForm.device, '', this.historyForm.sensorIds
					.join(','), this.historyForm.value.join('~'));
			}
		},

		current_change(currentPage) {
			this.queryParams.pageNo = currentPage;
			if (this.historyForm.deviceType == 1 && this.historyForm.groupsCount > 1) {
				this.getHistory(currentPage, this.queryParams.pageSize, this.historyForm.device, this.historyForm
					.sgroup_id, this.historyForm.sensorIds.join(','), this.historyForm.value.join('~'));
			} else {
				this.getHistory(currentPage, this.queryParams.pageSize, this.historyForm.device, '', this.historyForm
					.sensorIds.join(','), this.historyForm.value.join('~'));
			}

		},
		handleSizeChange_2(val) {
			this.queryParams_2.pageSize = val;
			this.getAlarm(this.queryParams_2.pageNo, val, this.alarmForm.device, this.alarmForm.value.join('~'));
		},
		current_change_2(currentPage) {
			this.queryParams_2.pageNo = currentPage;
			this.getAlarm(currentPage, this.queryParams_2.pageSize, this.alarmForm.device, this.alarmForm.value.join(
				'~'));

		},
		handleSizeChange_3(val) {
			this.queryParams_3.pageSize = val;
			this.getLogs(this.queryParams_3.pageNo, val, this.operForm.device, this.operForm.value.join('~'));
		},
		current_change_3(currentPage) {
			this.queryParams_3.pageNo = currentPage;
			this.getLogs(currentPage, this.queryParams_3.pageSize, this.operForm.device, this.operForm.value.join(
				'~'));
		},
		handleSizeChange_4(val) {
			this.queryParams_4.pageSize = val;
			this.getLines(this.queryParams_4.pageNo, val, this.lineForm.device, this.lineForm.value.join('~'));
		},
		current_change_4(currentPage) {
			this.queryParams_4.pageNo = currentPage;
			this.getLines(currentPage, this.queryParams_4.pageSize, this.lineForm.device, this.lineForm.value.join(
				'~'));

		}

		//数据分析暂时不做分页
		// handleSizeChange_5(val) {
		// 	this.queryParams_5.pageSize = val;
		// 	if(this.analysisForm.deviceType==1 && this.analysisForm.slavesCount>1){
		// 	    this.getAnalysis(this.queryParams_5.pageNo, val, this.analysisForm.device,this.analysisForm.slave_id,this.analysisForm.sensorIds.join(','),this.analysisForm.methodsValue.join(','),this.analysisForm.period,this.analysisForm.value.join('~'));
		// 	}else{
		// 		this.getAnalysis(this.queryParams_5.pageNo, val, this.analysisForm.device,'',this.analysisForm.sensorIds.join(','),this.analysisForm.methodsValue.join(','),this.analysisForm.period,this.analysisForm.value.join('~'));
		// 	}
		// },

		// current_change_5(currentPage) {
		// 	this.queryParams_5.pageNo = currentPage;
		// 	if(this.analysisForm.deviceType==1 && this.analysisForm.slavesCount>1){
		// 		this.getAnalysis(currentPage, this.queryParams_5.pageSize, this.analysisForm.device,this.analysisForm.slave_id,this.analysisForm.sensorIds.join(','),this.analysisForm.methodsValue.join(','),this.analysisForm.period,this.analysisForm.value.join('~'));
		// 	}else{
		// 		this.getAnalysis(currentPage, this.queryParams_5.pageSize, this.analysisForm.device,'',this.analysisForm.sensorIds.join(','),this.analysisForm.methodsValue.join(','),this.analysisForm.period,this.analysisForm.value.join('~'));
		// 	}

		// }


	},

	beforeDestroy() {
		//window.speechSynthesis.cancel();
		this.$message.closeAll();
		this.$notify.closeAll();
		if (this.map) {
			this.map.destroy();
		}
	},

	destroyed() {
		var that = this;
		//下面两句是清除从地图跳过来的默认数据
		localStorage.removeItem("liveData");
		this.liveData = null;
		clearInterval(that.timer);
		clearInterval(that.swiperTimer);
		clearInterval(that.powerTimer);
		clearInterval(that.tokenTimer);
		clearInterval(that.platformAlarmTimer);
		if (this.Socket) {
			this.Socket.close();
			this.Socket.onerror = null;
		}
		if (this.alarmSocket) {
			this.alarmSocket.close();
			this.alarmSocket.onerror = null;
		}
		this.stopVideo();
		//clearInterval(that.nowTimer);
		//clearInterval(that.weaTimer);
	}

}
</script>

<style scoped>
@media all and (max-width:2560px) {
	.photoBox {
		max-height: 13.2rem !important;

	}

	.bigPhotoBox {
		height: 900px !important;
	}

	.bigPhotoBox>img {
		height: 900px !important;
	}

	.imgbig {
		height: 5.65rem !important;
	}

	.big>>>.el-input__inner {
		font-size: 18px !important;
	}

	.big>>>.el-range-input {
		font-size: 18px !important;
	}


}

@media all and (max-width:1920px) {
	.photoBox {
		max-height: 8.7rem !important;

	}

	.bigPhotoBox {
		height: 620px !important;
	}

	.bigPhotoBox>img {
		height: 620px !important;
	}

	.imgbig {
		height: 5.95rem !important;
	}

	.big>>>.el-input__inner {
		font-size: 16px !important;
	}

	.big>>>.el-range-input {
		font-size: 16px !important;
	}



}

@media all and (max-width:1600px) {
	.big>>>.el-input__inner {
		font-size: 12px !important;
	}

	.big>>>.el-range-input {
		font-size: 12px !important;
	}

	.send>>>.el-input__inner {
		height: 0.6rem !important;
		line-height: 0.6rem !important;
		vertical-align: top !important;
		margin-top: -2px !important;
	}

	.send>>>.el-select__caret {
		height: 0.6rem !important;
		line-height: 0.6rem !important;
		vertical-align: top !important;
		/* margin-top:-2px!important; */
	}

	.newAll {
		height: 0.6rem !important;
		width: 2.2rem !important;
		line-height: 0.6rem !important;
	}

	.inpu {
		vertical-align: top !important;
		margin-top: 0.2rem !important;
	}

	.chartTime {
		left: 60% !important;
		line-height: 1.6rem !important;
	}

	.btn {
		width: 1.5rem !important;
	}



	.inpu {
		width: 5rem !important;
		height: 0.7rem !important;
		line-height: 0.7rem !important;
		padding: 1px !important;
	}

	.inpu /deep/ .el-input__inner {
		padding: 0;
		font-size: 0.2rem !important;
		width: 5rem !important;
		height: 0.7rem !important;
		line-height: 0.7rem !important;
		/* transform: translateY(-0.1rem); */
		padding: 1px !important;

	}

	.viewInput /deep/ .el-input__inner {
		transform: translateY(-0.1rem) !important;
	}

	.optionTree /deep/ .el-tree-node .el-tree-node__content .el-tree-node__label {
		font-size: 0.25rem !important;
	}
}

@media all and (max-width:1280px) {
	.inpu {
		max-width: 5rem !important;
		height: 0.7rem !important;
		line-height: 0.7rem !important;
		padding: 1px !important;
	}

	.inpu /deep/ .el-input__inner {
		padding: 0;
		font-size: 0.2rem !important;
		max-width: 5rem !important;
		height: 0.7rem !important;
		line-height: 0.7rem !important;
		/* transform: translateY(-0.1rem); */
		padding: 1px !important;

	}

	.newAll {
		height: 0.9rem !important;
		line-height: 0.9rem !important;
		font-size: 0.35rem !important;
	}

}

@media all and (max-width:1024px) {
	.inpu {
		width: 5rem !important;
		height: 0.7rem !important;
		line-height: 0.7rem !important;
		padding: 1px !important;
	}

	.inpu /deep/ .el-input__inner {
		padding: 0;
		font-size: 0.3rem !important;
		width: 5rem !important;
		height: 0.7rem !important;
		line-height: 0.7rem !important;
		/* transform: translateY(-0.1rem); */
		padding: 1px !important;

	}

  .searchForm .inpu{
    margin-top:-0.02rem!important;
  }



}




/* #page {
		position: relative;
		width: 99.4%;
		height:100vh;
		margin: 0 auto;

		overflow: hidden;
	} */

/* 三角符号 */
.sanjiao {
	position: fixed;
	width: 22%;
	height: .6rem;
	/* background-color: #7dffff; */
	left: 39%;
	bottom: 0;
	z-index: 99999;
}

/* .sanjiaoIcon1,
.sanjiaoIcon2 {
	position: fixed;
	width: .6rem;
	height: .6rem;
	color: #fff;
	bottom: .1rem;
	left: calc(50% - .3rem);
	cursor: pointer;
	z-index: 999999;
	transition: transform .4s;
} */

.sanjiaoIcon1,
.sanjiaoIcon2 {
	position: fixed;
	font-size: 0.8rem;
	color:deepskyblue;
	bottom: 0.02rem;
	left: calc(50% - 0.3rem);
    cursor: pointer;
	z-index: 999999;
	transition:all 0.4s;
}

.sanjiaoIcon1:hover,
.sanjiaoIcon2:hover {
	transform: scale(1.2);
}

/* .sanjiaoIcon1 {
	background-image: url(../../static/shang.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
}

.sanjiaoIcon2 {
	background-image: url(../../static/xia.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
} */

/* 固定的几个按钮 */
.fixed_btn {
	width: 22%;
	height: 10%;
	position: fixed;
	bottom: .6rem;
	left: 50%;
	transform: translateX(-50%);
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	z-index: 9999;
	display: flex;
	justify-content: space-around;
  background-color: rgba(0,0,0,0.8);
}

.fixed_btn>div {
	height: 100%;
	width: 18%;
	/* border: 1px solid red; */
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-around;
	align-content: center;
	transition: all 0.4s;
	z-index: -1;
}

.fixed_btn>div:hover {
	transform: scale(1.2);

}

.fixed_btn>div:hover .fixed_icon {
	box-shadow: inset 0 0 10px rgba(11, 148, 148, 0.5), 0 0 13px rgba(11, 148, 148, 0.7)
}

.fixed_btn>div:hover .fixed_title {
	color: #7dffff;
}

.fixed_btn:hover+.sanjiao>.sanjiaoIcon2 {
	display: block !important;
}

.sanjiao:hover .sanjiaoIcon2 {
	display: block !important;
}



/* 鼠标移入的效果 */
/* .fixed_btn>div:hover .fixed_icon {
	box-shadow: inset 0 0 10px 5px rgba(91, 220, 220, 0.5);
	border: 2px dashed #0b9494;
} */



/* .container {
  display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: space-evenly;
	width: 100%;
	height: 100%;
} */
/* 之前阴影的效果 */
/* .fixed_btn>div>div:nth-child(1) {
	box-shadow: inset 0 0 10px rgba(11, 148, 148, 0.5), 0 0 10px rgba(11, 148, 148, 0.5);
	background-color: rgba(11, 148, 148, .2);
} */

/* 实心的效果 */
.fixed_btn>div>div:nth-child(1) {
	background-color: rgba(35, 190, 190, 0.7);
}

.fixed_icon1 {
	width: 1.2rem;
	height: 1.2rem;
	/* background-color: #00d2d2; */
	background-image: url(../../static/icon1.png);
	background-repeat: no-repeat;
	background-size: 40% 40%;
	background-position: center;
	border-radius: 999px;
}

.fixed_icon2 {
	width: 1.2rem;
	height: 1.2rem;
	/* background-color: #00d2d2; */
	background-image: url(../../static/icon2.png);
	background-repeat: no-repeat;
	background-size: 40% 40%;
	background-position: 60% center;
	border-radius: 999px;
}

.fixed_icon3 {
	width: 1.2rem;
	height: 1.2rem;
	/* background-color: #00d2d2; */
	background-image: url(../../static/icon3.png);
	background-repeat: no-repeat;
	background-size: 40% 40%;
	background-position: center;
	border-radius: 999px;
}

.fixed_icon4 {
	width: 1.2rem;
	height: 1.2rem;
	/* background-color: #00d2d2; */
	background-image: url(../../static/icon4.png);
	background-repeat: no-repeat;
	background-size: 60% 60%;
	background-position: center;
	border-radius: 999px;
}

.fixed_icon5 {
	width: 1.2rem;
	height: 1.2rem;
	/* background-color: #00d2d2; */
	background-image: url(../../static/icon5.png);
	background-repeat: no-repeat;
	background-size: 60% 60%;
	background-position: center;
	border-radius: 999px;
}

.fixed_title {
	white-space: nowrap;
	font-size: .3rem;
	font-weight: 600;
}


.optionTree,
.optionTreeHidden {
	float: left;
	width: 15.2%;
	height: calc(100% - 0.1rem);
	position: relative;
	z-index: 1;
	transition: all 1s linear;
	/* padding-top: 0.1rem; */
	overflow: auto;
	margin-top: 0.1rem;
	border: 2px solid #ccc;
	background-color: transparent;
	/*14.6rem*/
	/* border:1px solid red; */
	/* padding:0.2rem; */
}

.optionTreeHidden {
	/* float:none; */
	margin: 0;
	padding: 0;
	width: 0;
	/* height:0; */
	overflow: hidden;
	border: none;
}

.treeHead {
	width: 100%;
	height: 0.8rem;
	background-color: #f5f7fA;
	line-height: 0.8rem;
	font-size: 0.35rem;
	text-align: left;
	text-indent: 0.2rem;
	border-bottom: 1px solid #eee;
	margin-bottom: 0.1rem;
}

.treeIcon {
	/* position:absolute;
		top:0.1rem;
		right:0.1rem; */
	float: right;
	vertical-align: middle;
	margin: 0.15rem 0.1rem 0 0;
	color: #409eff;
	font-size: 0.5rem;
	/* transition:1s all linear;
		transform-origin:0.25rem 0.25rem!important; */
}

.treeIcon:hover,
.el-icon-right:hover,
.el-icon-back:hover {
	color: deepskyblue !important;
}

.optionTree /deep/ .el-tree-node .el-tree-node__expand-icon {
	color: #409eff !important;
	font-size: 0.3rem;
}

.optionTree /deep/ .el-tree-node .el-tree-node__content {
	padding-left: 2px !important;
	height: 34px;
	line-height: 34px;
	border-bottom: 1px dashed #ccc;
	width: 103% !important;

}

.optionTree /deep/ .el-tree-node .el-tree-node__content .el-tree-node__label {
	font-size: 0.32rem;
	margin-left: -4px;
	font-weight: normal;
}

.mainRight,
.mainRightFull {
	float: right;
	width: 84.5%;
	height: calc(100% - 0.1rem);
	position: relative;
	z-index: 1;
	margin-top: 0.1rem;
	transition: all 1s linear;
	background-color: transparent;
	/*14.6rem*/
	/* border: 1px solid #ccc; */
}

.mainRightFull {
	float: left;
	width: 100%;
}

.tabsOption {
	position: relative;
	z-index: 1;
	box-shadow: none !important;
	height: 100%;
	background-color: transparent;
	border: none;
}

.tabsOption /deep/ .el-tabs__header {
	height: 0.8rem !important;
	line-height: 0.8rem !important;
	padding: 0;
	padding-left: 0.8rem;
	border: none !important;
	background-color: rgba(0, 0, 0, 0.3);
}

.tabsOption /deep/ .el-tabs__content {
	padding: 0 !important;
}

.tabsOption /deep/ .el-tabs__nav-scroll {
	height: 0.8rem !important;
	line-height: 0.8rem !important;
	border: none !important;
}

.tabsOption /deep/ .el-tabs__nav-scroll .el-tabs__nav {
	height: 0.8rem !important;
	line-height: 0.8rem !important;
	border: none !important;
}

.tabsOption /deep/ .el-tabs__nav-scroll .el-tabs__nav .el-tabs__item {
	/* height: calc(0.8rem + 2px) !important; */
	height: 0.8rem !important;
	line-height: 0.8rem !important;
	vertical-align: top !important;
	font-size: 0.35rem;
	width: 2.4rem !important;
	padding: 0 6px !important;
	text-align: center;
	/* padding-top:0; */
	/* font-family: "黑体"; */
	font-weight: 700;
	color: transparent;
	z-index: 1;
	border: none !important;
	/* border:1px solid red; */
	/* margin-top: 1px; */
}

/* .tabsOption /deep/ .el-tabs__nav .el-tabs__item:first-child{
		padding-left:1.2rem!important;
	} */

.tabsOption /deep/ .el-tabs__nav-scroll .el-tabs__nav .is-active {
	/* color: #409eff; */
	background-color: transparent;

}

.tabsOption>>>.el-input__inner {
	background-color: transparent;
	color: #eee;
}


.tabsOption /deep/ .el-button--primary {
	background-color: rgba(0, 0, 0, 0.5);
	border: 1px solid #00D8d8;
}

.tabsOption /deep/ .el-button--primary:hover {
	color: #00D8d8;
}

.oneDeviceSeclt /deep/ .el-input__inner {
	padding-left: 4px;
	padding-right: 4px !important;
	height: 0.6rem;
	line-height: 0.6rem;
}

.deviceTabActive {
	color: #409eff;
}

.search {
	width: auto;
	height: 1rem;
	line-height: 1rem;
	border-radius: 6px;
	position: absolute;
	padding-left: 10px;
	background-color: rgba(0, 0, 0, 0.5);
	top: 0.2rem;
	left: 0.2rem;
	z-index: 100;
}

.searchForm {
	display: inline-block;
	text-align: left;
	height: 0.8rem;
	line-height: 0.8rem;
	vertical-align: middle;
	margin-top:0.1rem;
	width: auto;
	float: left;
	background-color: transparent;
	/* border:1px solid green; */
}

.chaxu {
	color: white;
	font-size: 0.3rem;
  line-height: 0.8rem;
}

.searchForm  .inpu{
  float:right;
}

.searchForm .inpu /deep/ .el-input__inner {
	width: 3rem !important;
	color: #fff !important;
	background-color: transparent !important;

}

.searchForm /deep/ .el-input {
	width: 3rem !important;
	color: #fff !important;
	background-color: transparent !important;

}

.searchForm /deep/ .el-select {
	width: 3rem !important;
	color: #fff !important;
	background-color: transparent !important;
}

.searchForm .mapDevice {
	width: 5rem !important;
	color: #fff !important;
	background-color: transparent !important;
}

.searchForm .mapDevice /deep/ .el-input__inner {
	width: 5rem !important;
	color: #fff !important;
	background-color: transparent !important;
}

.searchForm .mapDevice /deep/ .el-input {
	width: 5rem !important;
	color: #fff !important;
	background-color: transparent !important;
}

.searchForm .mapDevice /deep/ .el-select {
	width: 5rem !important;
	color: #fff !important;
	background-color: transparent !important;
}

.searchForm /deep/ .el-range-input {
	color: #fff !important;
	background-color: transparent !important;
}

.searchForm /deep/ .el-range-separator {
	color: #fff !important;
}

.mapOption {
	padding: 0 4px !important;
}

.deviceData,
.analysisData {
	/* margin-top: 0.1rem; */
	width: 100%;
	/* min-height: 1rem; */
	overflow: auto;
	transition: all 1s linear;
	/* border: 1px solid red; */
}

.deviceData {
	height: calc(100vh - 2.35rem) !important;
	/* border:1px solid red; */
}

.analysisData {
	height: calc(100vh - 3.6rem);
	/* border:1px solid red; */
}

.oneDevice {
	width: 100%;
	min-height: 1rem;
	/* margin-top:0.2rem; */
	/* border-bottom: 2px solid #ccc; */
	/* background-color: #f2f2f2; */
}

.oneDevice:first-child {
	margin-top: 0.1rem;
}

.head_form /deep/ .el-form-item {
	margin-bottom: 2PX
}

.optionTree /deep/ .el-tree__empty-text {
	font-size: 0.35rem;
}

#content,
#productImage {
	width: 99.9%;
	overflow: hidden;
	/* transition:all 500s linear; */
	/* height: 16.8rem; */
	height: calc(100vh - 1.45rem) !important;
	/* position:absolute; */
	margin: 0 auto;
	margin-top: 0.2rem;
	/* margin-left:0.2rem; */
	padding: 0;
	/* border:1px solid red; */
}


.mapbtn {
	display: inline-block;
	position: fixed;
	bottom: 0.6rem;
	right: 0.5rem;
	width: 1.4rem;
	height: 0.6rem;
	font-size: 0.3rem;
	line-height: 0.5rem;
	z-index: 10000;
	color: white;
	background-color: forestgreen;
	border-radius: 4px;
}

.mapbtn:hover {
	background-color: limegreen;
}


.fram {
	float: left;
	margin-top: 0.15rem;
	width: 100%;
	/* min-height:710px; */
	height: calc(100vh - 1.2rem) !important;
	overflow: auto;
	position: relative;
	z-index: 1;
	padding: 0 !important;

	/* border:1px solid red; */

}

.fram_2 {
	margin-top: 0.15rem;
	padding: 0 !important;
}

#mainIframe {
	transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-webkit-transition: all 500ms linear;
	/* transition: all 500ms linear; */
}

.viewBox,.viewBoxFull {
	min-width: 200px;
	font-size: 0.35rem;
	color: white;
	position: fixed;
	top:1.8rem;
	right: 0.3rem;
	height: auto;
	/* transition:all 500ms linear; */
	z-index: 10000;
}

.viewBoxFull{
	top:0.9rem!important;
}

.oneView {
	width: 100%;
	height: 0.8rem;
	line-height: 0.8rem;
	margin-top: 0.2rem;
	background-color: rgba(0, 0, 0, 0.3);
	cursor: pointer;
	/*deepskyblue透明度0.5*/
	/* background-color:rgba(0,191,255,1); */
	border-radius: 4px;
	padding: 0 0.2rem;
}

.active_2 {
	color: deepskyblue;
	background-color: rgba(0, 0, 0, 0.6);
	border: 1px solid deepskyblue;
}

.viewbtn_2,.viewbtnFull {
	display: flex;
	/* display: inline-block; */
	position:fixed;
	height: 0.6rem;
	top:1.25rem;
	right: 0.3rem;
	z-index: 10000;
	background-color: rgba(0, 0, 0, 0.3) !important;
	border: none;
	padding: 0.15rem;
  max-width: 0.75rem;
	justify-content: flex-start;
  transition: all 800ms linear;
	align-items: center;
	border-radius: 4px;
  overflow: hidden;
}

.viewbtnFull{
	top:0.3rem!important;
}

.viewbtn_2:hover,.viewbtnFull:hover{
		max-width:5rem;
	}

.viewbtn_2 img,.viewbtnFull img {
	width: 0.4rem;
	height: 0.4rem;
	cursor: pointer;
}

.viewbtn_2 i,.viewbtnFull i {
	color: #fff;
	font-size: 0.45rem;
	margin-left: 0.15rem;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
}

.viewbtn_2 span,.viewbtnFull span {
	display: inline-block;
	width: auto;
	margin-left: 0.3rem;
	color: #eee;
	font-weight: 700;
	font-size: 0.35rem;
}

.big>>>.el-popper[x-placement^=bottom] {
	margin-top: 8px;
	background-color: red !important;
}

.dial>>>.el-dialog__body {
	/*曲线对话框的背景色*/
	/* background: -webkit-linear-gradient(to bottom, #0b2c51 20%, #bbb 100%);
		background: -moz-linear-gradient(to bottom, #0b2c51 20%, #bbb 100%);
		background: -ms-linear-gradient(to bottom, #0b2c51 20%, #bbb 100%);
		background: -o-linear-gradient(to bottom, #0b2c51 20%, #bbb 100%);
		background: linear-gradient(to bottom, #0b2c51 20%, #bbb 100%); */
	/* background-color: #0b2c51; */
	padding: 10px;
}

.dial>>>.el-dialog__header {
	position: relative;
	z-index: 99;
	width: 90%;
	height: 0.8rem;
	background-color: transparent !important;
}

.container_table>>>.el-radio__label {
	color: #fff;
	padding-left: 4px;
	font-size: 14px;
}

.container_table>>>.el-radio {
	margin-right: 0;
}

.container_table>>>.el-switch__label--right {
	right: 70px !important;
}

.container_table>>>.el-switch__label--left {
	left: 70px !important;
}

.green {
	color: green;
}

.pagination {
	margin-top: 0.2rem;
}

.bottom_top {
	position: relative;
	/* margin: 0.1rem auto; */
	width: 100%;
	height: 0.8rem;
	line-height: 0.8rem;
	/* padding-right: 0.2rem; */
	/* background-color:transparent; */
	color: #eee;
	margin: 0 auto;
	/* background-color:#409eff; */
	/* background-color: #0e6db0 !important; */
	background: linear-gradient(to right, rgba(19, 128, 128, 1) 10%, transparent) !important;
	/* background:radial-gradient(circle, #409eff 40%,#0e6db0); */
	/* background:linear-gradient(to bottom,#0e6db0 ,#409eff 50%,#0e6db0); */
	/* border-bottom:1px solid #ccc; */
	/* padding:0 0.15rem; */
	/* background-color: rgba(0, 0, 0, 0.2); */
	/* background-color: rgba(17, 17, 17, 0.5); */
	/*约等于#111透明0.5*/
	/* box-shadow: 0px 0px 10px 5px inset #0b2c51; */
	/* box-shadow: 0px 0px 10px 5px #ccc; */
	/* border:1px solid red; */
}

.bottom_top:after {
	content: '.';
	display: block;
	height: 0;
	overflow: hidden;
	clear: both;
}

.bottom_top_left {
	float: left;
	min-width:42%;
	height: 0.8rem;
	line-height: 0.8rem;
	text-align: left;
	padding: 0 0.1rem;
	padding-right: 0.5rem;
	font-size: 0.3rem;
	color: #eee;
	background-color: transparent !important;
	/* background-color:rgba(0,200,255,1); */
	/* background-color:#4671d5; */
	/* background-color:#409eff; */
}

.bottom_top .inpu /deep/ .el-input__inner::-webkit-input-placeholder {
	color: #eee !important;
	font-size: 0.3rem !important;
}

.bottom_top .inpu /deep/ .el-input__inner:-moz-placeholder {
	color: #eee !important;
	font-size: 0.3rem !important;
	/* Mozilla Firefox 4 to 18 */
}

.bottom_top .inpu /deep/ .el-input__inner::-moz-placeholder {
	color: #eee !important;
	font-size: 0.3rem !important;
	/* Mozilla Firefox 19+*/
}

.bottom_top .inpu /deep/ .el-input__inner:-ms-input-placeholder {
	color: #eee !important;
	font-size: 0.3rem !important;
	/* Internet Explorer 10+ */
}

.bottom_top .out .el-input__inner {
	height: 0.6rem !important;
	line-height: 0.6rem !important;
}

.pointName {
	float: left;
	color: #fff;
	/*#eef*/
	font-size: 0.4rem;
	margin-right: 4px;
	margin-top: 0.25rem;
	vertical-align: middle;
	text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5) !important;
}

.slave_top {
	min-width: 15%;
	height: 0.5rem;
	line-height: 0.5rem;
	margin-top: 2px;
	text-align: left;
	padding: 0 0.1rem;
	font-size: 0.3rem;
	color: #00D8d8;
	/* font-size:0.32rem; */
	font-weight: 700;
	/* border-bottom: 2px dotted #ccc; */
	/* text-shadow: 2px 2px 2px rgba(0,0,0,0.8)!important; */
	/* background-color:rgba(0,0,0,0.1); */
}

.bottom_top_right {
	float: left;
	width: auto;
	text-align: left;
	height: 0.8rem;
	line-height: 0.8rem;
	margin-left: 0.4rem;
	color: #222;
  /* border:1px solid red; */
}

.oneDeviceSeclt{
  height: 0.8rem;
  line-height: 0.8rem;
  vertical-align: top;

}

.oneDeviceName {
	float: left;
	/* display:inline-block; */
	text-align: left;
	/* font-family:"黑体"; */
	width: 5.2rem;
	height: 0.8rem;
	line-height: 0.8rem;
	font-size: 0.34rem;
	font-weight: 900;
	color: #eee;
	/*#eef*/
	text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5) !important;
}

.bottom_top .inpu /deep/ .el-input__inner::-webkit-input-placeholder {
	color: #fff !important;
	font-size: 0.3rem !important;

}

.bottom_top .inpu /deep/ .el-input__inner:-moz-placeholder {
	color: #fff !important;
	font-size: 0.3rem !important;
}

.bottom_top .inpu /deep/ .el-input__inner::-moz-placeholder {
	color: #fff !important;
	font-size: 0.3rem !important;
}

.bottom_top .inpu /deep/ .el-input__inner:-ms-input-placeholder {
	color: #fff !important;
	font-size: 0.3rem !important;
}

.bottom_top .out .el-input__inner {
	height: 0.6rem !important;
	line-height: 0.6rem !important;
}

#historyData,
#live {
	float: left;
	width: 1.8rem;
	text-align: center;
	height: 0.8rem;
	cursor: pointer;
	line-height: 0.8rem;
	font-size: 0.3rem;
	/* border: 1px solid deepskyblue; */
	/* background-color: #B7873C; */
}

.chartTime {
	position: absolute;
	top: 1.1rem;
	left: 70%;
	z-index: 10;
	color: white;
}

.imgbig {
	width: 100%;
	height: 5.95rem;
	position: relative;
	background-color: rgba(17, 17, 17, 0.5);
	z-index: -1;
}

.imgtit {
	width: 2rem;
	text-align: center;
	height: 0.8rem;
	line-height: 0.8rem;
	position: absolute;
	font-size: 0.35rem;
	color: deepskyblue;
	font-weight: 600;
	/* font-family: "楷体"; */
	left: 0;
	top: 0;
}

#isfull {
	width: 99.5%;
	/* padding:0; */
	/* max-height:12rem; */
	/* min-height: 1.4rem; */
	height: auto;
	text-align: center;
	/* background-color: transparent; */
	margin: 0 auto;
	padding: 0.1rem 0;
	/* overflow-y:visible; */
	/* overflow-x:hidden; */
	/* padding-bottom: 0; */
	/* border:1px solid red; */
	/* border:1px solid red; */
}

.container_table,
.analysis_echart {
	width: 100%;
	height: auto;
	margin: 0 auto;
	margin-top: 0.05rem;
	background-color: transparent;
}

.formline,
.tip {
	display: block;
	text-align: center;
	/* padding-left:0.4rem; */
	margin: 0 auto;
	font-size: 0.35rem !important;
	box-sizing: border-box;
	width: 100%;
	height: 1.2rem;
	line-height: 1.2rem;
	/*border:1px solid red;*/
}

.inpu {
	width: 5rem;
	height: 0.8rem;
	color: white !important;
	background-color: transparent !important;
	vertical-align: middle;
	/* border:1px solid red; */
}

.inpu /deep/ .el-input__inner {
	width: 5rem;
	padding-left: 4px;
	padding-right: 4px !important;
	color: #fff;
  border: 1px solid rgba(19, 128, 128, 1);
}

.analysis {
	width: 4.5rem !important;
}

.analysis /deep/ .el-input__inner {
	width: 4.5rem !important;
}

.method {
	width: 3rem !important;
}

.method /deep/ .el-input__inner {
	width: 3rem !important;
}

#myChart {
	min-width: 90%;
	height: 400px;
	margin: 0 auto;
	margin-top: 1.5rem;
	padding: 0 !important;
}

#historyChart,
#analysisChart,
#statementChart,
#analysisBar {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.chartTip {
	position: absolute;
	top: 4px;
	left: 10px;
	z-index: 2;
	font-size: 0.25rem;
	color: #aaa;
}

.methodSelsct {
	position: absolute;
	top: 6px;
	right: 150px;
	z-index: 2;
	font-size: 0.3rem;
	color: #111;
}

/* newAll只用于导出按钮  */
.btn,
.newAll {
	box-sizing: border-box;
	display: inline-block;
	padding: 0 !important;
	width: 1.2rem;
	padding: 0;
	height: 0.55rem;
	text-align: center;
	font-size: 0.25rem;
	line-height: 0.55rem;
	/* border: 1px solid #ccc; */
	vertical-align: middle;
	background-color: transparent;
	color: #222;
	/* margin-top: 0.1rem; */
}

.btn:hover {
	border: none;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.4);
	box-shadow: 0px 0px 10px 5px inset rgba(0, 0, 0, 0.8);
}

.newAll {
	height: 0.55rem;
	min-width: 1rem;
	line-height: 0.55rem;
	background-color: #409eff;
	border-radius: 4px;
	text-decoration: none;
	;
	box-shadow: none;
}

.newAll:hover {
	border: none;
	background-color: #661ff !important;
	/* color: deepskyblue; */
	box-shadow: 0px 0px 10px 5px inset #66b1ff;
}

#myChart,
#myChartLive,
#powerChartLive,
#without {
	min-width: 80%;
	height: 420px;
	margin: 0 auto;
	margin-top: 10px;
	padding: 0 !important;
	background-color: transparent;
	/* border:1px solid red; */
	/* box-shadow: 0px 0px 10px 5px inset deepskyblue; */
}

#powerChartLive {
	/* border:1px solid red; */
	min-width: 1000px;
	width: 1000px;
	height: 500px;
}

#without {
	line-height: 450px;
	text-align: center;
	font-size: 0.3rem;
}

.tophid {
	width: 100%;
	height: 0.8rem;
	line-height: 0.8rem;
	text-align: left;
	background-color: rgba(17, 17, 17, 0.5);
	position: absolute;
	font-size: 0.3rem;
	top: 0;
	left: 0;
	z-index: 999;
	padding: 0 0.2rem !important;
}

.back {
	float: right;
	width: 1rem;
	height: 0.8rem;
	line-height: 0.8rem;
	font-size: 0.3rem;
	text-align: right;
	/* border:1px solid red; */
}

.cardActive {
	/* #3795ff */
	background-color: deepskyblue;
	cursor: default;
}

p {
	line-height: 0.5rem;
}

.devStatus {
	width: 20%;
	float: right;
	font-size: 0.35rem;
	line-height: 0.8rem;
	text-align: right;
	padding-right: 0.4rem;
}

/* .pagination>>>.el-input__inner {
		font-size: 12px !important;
	} */

.container_table>>>.el-table--small td {
	padding: 4px 0;
}

.container_table>>>.el-table--small th {
	padding: 6px 0;
}

.container_table>>>.el-table .cell,
.el-table th div {
	padding-left: 2px;
	padding-right: 2px;
	/* border: 1px solid rgba(19, 128, 128, 1) */
}

.container_table>>>.el-table__footer {
	font-size: 0.3rem !important;
	font-weight: 700;
	border: 1px solid rgba(19, 128, 128, 1)
}

#cameraData {
	display: flex;
	flex: auto;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	overflow: auto;
	margin-top: 0.2rem;
	/* min-height: 1rem; */
	height: calc(100vh - 1.45rem) !important;

}

.cameraBox {
	width: 40%;
	height: 420px;
	/* border:1px solid red; */
}

.head_video,
.head_video_2 {
	display: inline-block;
	width: 100%;
	height: 360px;
	line-height: 360px;
	position: relative;
	box-sizing: border-box;
	z-index: 1;
	/* padding: 1px;
		width: 420px; */
	padding: 0;
	font-size: 14px;
	/* line-height: 1rem; */
	background-color: #000;
}

.head_video_2 {
	height: 420px !important;
}

.camera {
	/* position: absolute;
		bottom: -1rem; */
	font-size: 0.3rem;
	text-align: left;
	right: 0;
	color: #222;
	height: 0.8rem;
	line-height: 0.8rem;
	margin: 0.1rem 0;
	border-bottom: 2px solid #ccc;
	/* z-index: 999; */
	/* background-color:rgba(0,0,0,0.6); */
	/* box-shadow:0 0 6px #111; */
}

.camera>>>.el-input__inner {
	/* background-color: #0b2c51;
		color: #fff; */
	height: 0.6rem;
	line-height: 0.6rem;
}

.send>>>.el-input__inner {
	height: 0.7rem !important;
	line-height: 0.7rem !important;
}

.oneOption:hover {
	background-color: #eee !important;
}

.oneOption {
	background-color: transparent !important;
}

#goback {
	margin-left: 0.2rem;
	float: left;
	/* vertical-align: middle; */
	margin-top: 0.1rem;
}

.formline>>>.el-input__inner {
	width: 5.5rem;
}

.slave {
	width: 5.2rem !important;
}

.formline>>>.slave .el-input__inner {
	width: 5.2rem !important;
}

.sendOut {
	font-size: 0.35rem;
	float: right;
	margin-right: 0.2rem;
}

.timeBox {
	font-size: 0.3rem;
	width: 90%;
	height: 1rem;
	line-height: 1rem;
	margin-top: 0.2rem;
	margin-left: 0.4rem;
}

.timebtn {
	width: 1.5rem;
	height: 0.6rem;
	padding: 0;
	text-align: center;
	line-height: 0.6rem;
}

.allExpand {
	float: right;
	width: 0.7rem;
	height: 0.7rem;
	line-height: 0.7rem;
	background-color: rgba(19, 128, 128, 1);
	color: #eee;
	font-size: 0.5rem;
	padding: 0;
	margin-top: 0.1rem;
	margin-right: 0.2rem;
	border: none;
}

.rightIcon {
	float: right;
	max-width: 1.8rem;
	min-width: 1.2rem;
	display: flex;
	justify-content: space-between;
	height: 0.6rem;
	line-height: 0.6rem;
	background-color: #eee;
	color: #0e6db0;
	margin-top: 0.1rem;
	font-size: 0.35rem;
	margin-left: 0.2rem;
	border-radius: 4px;
	padding: 0;
}

.oneExpand {
	display: inline-block;
	text-align: center;
	margin: 0;
	/* float:right; */
	width: 0.6rem;
	height: 0.6rem;
	line-height: 0.6rem;
	background-color: rgba(19, 128, 128, 1) !important;
	color: #eee;
	border: none;
	border-radius: 0;
	/* margin-top:0.1rem; */
	font-size: 0.4rem;
	/* padding:0; */
	/* margin-left:0.2rem; */
	padding: 0;
}

.oneExpand:first-child {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.oneExpand+.oneExpand {
	border-left: 1px solid #bbb;
	margin-left: 0 !important;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.oneExpand:hover {
	color: #fff;
	/* border:1px solid #409eff; */
}



.topNewMenu {
	display: flex;
	justify-content: flex-end;
	position: absolute;
	margin: 0;
	margin-bottom: 0.1rem;
	width: 100%;
	top: 0;
	left: 0;
	/* border:1px  solid red; */
	z-index: 3;
	/* text-align: left; */
	/* height: calc(0.8rem + 1px);
		line-height: 0.8rem; */
	padding-right: 0.66rem;
	padding-left: 0.5rem;
	background-color: transparent;
	background-image: url('../../static/titleBar.png');
	background-repeat: no-repeat;
	background-size: 9rem 0.8rem;
	/* border: 1px solid #DCDFE6; */
	border-bottom: 1px solid #00D8d8;
	/* border-bottom:none; */
	/*约等于#111透明0.5*/
	/* box-shadow: 0px 0px 10px 5px inset #0b2c51; */
}

.oneMenu,
.menuActive {
	height: 0.8rem !important;
	line-height: 0.8rem !important;
	vertical-align: top !important;
	font-size: 0.35rem;
	width:2.33rem !important;
	/* padding: 0 6px !important; */
	text-align: center;
	cursor: pointer;
	/* padding-top:0; */
	/* font-family: "黑体"; */
	font-weight: 700;
	color: #fff;
	z-index: 3;
	background-image: url('../../static/borderSide.png');
	background-size:2.33rem 0.8rem;
	transform: skewX(45deg);
	/* border:1px solid red; */
	/* margin-top: 1px; */
}

/* 文字反转扶正 */
.oneMenu span {
	display: inline-block;
	transform: skewX(-45deg);
}

.menuActive {
	color: #7Dffff;
	text-shadow: 5px 5px 5px #111;
	/* margin-right: -1px; */
	background: linear-gradient(to top, #00D8d8 2%, transparent 60%);

}

.platFormTitle {
	position: absolute;
	z-index: 3;
	left: 1rem;
	top: 0;
	height: 0.8rem;
	line-height: 0.76rem;
	color: #fff;
	font-size: 0.5rem;
	font-weight: 700;
	/* background: url('../../static/topline.png') no-repeat left bottom; */
}

.logo {
  position: absolute;
  z-index: 3;
  left: 0.2rem;
  top: 0.1rem;
  /* width:0.6rem;
  height: 0.6rem; */
  min-width:0.6rem;
  max-width:4rem;
  height: 0.6rem;
}

.exit,
.isScreen {
	width: auto;
	transform: none;
	box-sizing: border-box;
	/* float: right; */
	text-align: right;
	padding: 0;
	height: 0.8rem;
	line-height: 0.8rem;
	font-size: 0.35rem;
	font-weight: 700;
	cursor: pointer;
	color: #fff;
	margin-left: 0.5rem;
	/* border: 1px solid red; */
}

/* .exit span:nth-child(2){
  	display: inline-block;
  	width:auto;
  	height: 1.2rem;
  	line-height: 1.2rem;
  } */


.exit:hover,
.isScreen:hover {
	background-color: transparent;
	color: #00D8d8;
}

.exitIcon,
.isScreenIcon {
	display: inline-block;
	width: 0.6rem;
	height: 0.6rem;
	line-height: 0.6rem;
	text-align: center;
	background-color: rgba(19, 128, 128, 0.5);
	vertical-align: middle;
	padding-top: 2px;
	margin-right: 0.1rem;

}

.exit:hover i,
.isScreen:hover i {
	/* background-color: transparent; */
	color: #00D8d8 !important;
}

.swiperInput /deep/ .el-input__inner {
	padding-right: 0;
}

/* .photoBox{
		width:100%;
		min-height:4.5rem;
		max-height:9rem;
		margin-top:0.2rem;
		display:flex;
		flex-wrap: wrap;
		justify-content:flex-start;
	    align-items:center;
		overflow: auto;
		border:1px solid #ccc;
	} */

.photoBox {
	width: 100%;
	/* height:auto; */
	min-height: 4.2rem;
	max-height: 8.35rem;
	margin-top: 0.2rem;
	padding: 0.1rem;
	display: grid;
	display: -webkit-grid;
	display: -moz-grid;
	display: -ms-grid;
	grid-gap: 0.1rem;
	/* auto-fit表示自适应列数，也可以是规定具体数值， */
	/* minmax(列宽的最小值，列宽的最大值)设置列宽区间值，也可以是具体值 */
	/* grid-template-columns: repeat(4,minmax(4.5rem,1fr)); */
	grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
	/* 2表示最多支持的行数，200px表示行高，如果小于6，超出的的行的行高和项目(如果没有设置高度)的高度将不受控制 */
	/* 行数不够会自动撑开 */
	/* grid-template-rows: repeat(2, 4rem); */
	grid-template-rows: repeat(1, 4rem) !important;
	overflow: auto;
	border: 1px solid #ccc;
}

.onePhoto {
	/* width:5rem;
		height:4rem; */
	position: relative;
	/* margin:0.1rem; */
	/* border:1px solid red; */
}

.onePhoto>.oneImg {
	display: block;
	cursor: pointer;
	width: 100%;
	/* height:calc(5rem - 40px); */
	height: 100%;
}

.photoBottom {
	width: 100%;
	height: 28px;
	line-height: 28px;
	padding-left: 0.1rem;
	font-size: 0.24rem;
	color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: transparent;
	/* border:1px solid blue; */
}

.delIcon {
	float: right;
	color: red;
	width: 0.5rem;
	height: 0.5rem;
	line-height: 0.5rem;
	text-align: center;
	cursor: pointer;
	font-size: 0.4rem;
	opacity: 0.7;
}

.delIcon:hover {
	opacity: 1;
}

.bigPhotoBox {
	width: 100%;
	height: 620px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
}

.bigPhotoBox>img {
	width: 100%;
	height: 620px;
}

.bigClose {
	width: 0.5rem;
	height: 0.5rem;
	line-height: 0.5rem;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	text-align: center;
	font-size: 0.4rem;
	color: #fff;
	cursor: pointer;
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	z-index: 2;
}

/* .nowEquip{
		display:inline-block;
		width:auto;
		text-align:left;
		font-size:0.3rem;
	} */

.container_table /deep/ .el-table {
	background-color: transparent !important;
	border: 1px solid rgba(19, 128, 128, 1) !important;
	box-shadow: none;
}

.container_table /deep/ .el-table--small .el-table__body {
	background-color: rgba(0, 0, 0, 0.5) !important;
	/* border: 1px solid rgba(19, 128, 128, 1) !important; */
	box-shadow: none;
}

.container_table /deep/ .el-table--small td,
.container_table /deep/ .el-table--small tr {
	background-color: transparent !important;
	color: #ddd;

}

.container_table /deep/ .el-table--mini .el-table__body {
	background-color: rgba(0, 0, 0, 0.5) !important;
}

.container_table /deep/ .el-table--mini td,
.container_table /deep/ .el-table--mini tr {
	background-color: transparent !important;
	color: #ddd;
}

.pagination {
	margin-top: 0.2rem;
	background-color: transparent !important;
	color: #eee;
}

.pagination /deep/ .el-pagination__total,
.pagination /deep/ .el-pagination__jump,
.pagination /deep/ .btn-prev,
.pagination /deep/ .btn-next,
.pagination /deep/ .number,
.pagination /deep/ .more {
	background-color: transparent;
	color: #eee;
}

.pagination /deep/ .active {
	color: #409eff;
}

.oneDeviceSeclt /deep/ .el-input__inner {
	padding-left: 4px;
	padding-right: 4px !important;
	height: 0.6rem;
	line-height: 0.6rem;
}

.deviceTabActive {
	color: #409eff;
}

* /deep/ .el-input__inner {
	/* padding-left: 4px;
  	padding-right: 4px; */
	color: #eee !important;
	border: 1px solid rgba(19, 128, 128, 1) !important;
}

.pagination /deep/ .el-input__inner {
	padding-left: 4px;
	padding-right: 4px;
	color: #eee !important;
	border: none !important;
}

.inpu /deep/ .el-range-input {
	background-color: transparent !important;
	color: #eee;
}

.inpu /deep/ .el-range-separator {
	color: #eee !important;
}

.container_table /deep/ .el-table__empty-text {
	color: #eee !important;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	background-color: transparent;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	background-color: transparent;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
	/*滚动条的颜色*/
	background-color: #138080;
}

.labelName {
	display: inline-block;
	width: auto;
	vertical-align: middle;
	height: 0.7rem;
	line-height: 0.7rem;
	padding: 0 0.2rem;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 1) 100%);
	font-size: 0.3rem;
	color: #eee;
	border-radius: 4px;
	/* border:1px solid red; */
}

span {
	user-select: none !important;
}

.optionListBox {
	min-width: 220px;
	max-width: 300px;
	height: auto;
	min-height: 60px;
	position: fixed;
	top: 1.4rem;
	right: 0.4rem;
	z-index: 9999;
	background-color: rgba(0, 0, 0, 0.8);
	/* border:1px solid red; */
	/* transition:all 500ms linear; */
	z-index: 10000;
}

.optionListBox1 {
	min-width: 220px;
	max-width: 300px;
	max-height:calc(100% - 4rem);
	min-height: 60px;
	position: fixed;
	bottom: 3rem;
	left: 42%;
	transform: translateX(-50%);
	z-index: 9999;
	background-color: rgba(0, 0, 0, 0.8);
  text-align:center;
  overflow: auto;
	/* border:1px solid red; */
	/* transition:all 500ms linear; */
  padding: 0.1rem;
	padding-bottom: .3rem;
	z-index: 10000;
}

.optionListBox2 {
	min-width: 220px;
	max-width: 300px;
	height: auto;
	min-height: 60px;
	position: fixed;
	bottom: 3rem;
	left: 47%;
	transform: translateX(-50%);
	z-index: 9999;
	background-color: rgba(0, 0, 0, 0.8);
	/* border:1px solid red; */
	/* transition:all 500ms linear; */
	padding-bottom: .3rem;
	z-index: 10000;
}

.itemOption {
	width: 100%;
	height: 0.8rem;
	line-height: 0.8rem;
	margin-top: 0.2rem;
	text-align: center;
	/* background-color: rgba(0,191,255,0); */
	cursor: pointer;
	color: #eee;
	font-size: 0.3rem;
	/* box-shadow:0 0 5px 2px inset #00D8d8; */
	border: 1px solid rgba(19, 128, 128, 1);
	/*deepskyblue透明度0.5*/
	/* background-color:rgba(0,191,255,1); */
	border-radius: 4px;
	padding: 0 0.2rem;
}

.itemOption1 {
	width: 100%;
	height: 0.8rem;
	line-height: 0.8rem;
	margin-top: 0.2rem;
	text-align: center;
	/* background-color: rgba(0,191,255,0); */
	cursor: pointer;
	color: #eee;
	font-size: 0.3rem;
	/* box-shadow:0 0 5px 2px inset #00D8d8; */
	border: 1px solid rgba(19, 128, 128, 1);
	/*deepskyblue透明度0.5*/
	/* background-color:rgba(0,191,255,1); */
	border-radius: 4px;
	padding: 0 0.2rem;
}


.itemOption:first-child {
	margin-top: 0;
}

.activeOption {
	color: #75ffff !important;
	background-color: rgba(19, 128, 128, 1);
	/* box-shadow: 0 0 5px 5px inset #00d8d8; */
	border: none;
	/* border: 1px solid deepskyblue; */
}

.marTop_9 {
  margin-top:-0.9rem!important;
}

.marTop_2{
  margin-top: -0.2rem!important;
}


.container_table /deep/ .el-table__fixed{
	background-color: #000!important;
}

.container_table /deep/ .el-table__fixed::before{
	background-color: transparent!important;
}

.container_table /deep/ .el-table--border::after, .container_table /deep/ .el-table--group::after, .container_table /deep/ .el-table::before{
	background-color: transparent!important;
}

.container_table>>>.el-table .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  border-radius:0;
  background-color:transparent!important;
  /* 滚动条宽度 */
}

/* 设置滚动条滑块 */
.container_table>>>.el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color:rgba(19, 128, 128, 1)!important;
 /* box-shadow: inset 0 0 6px transparent;
  -webkit-box-shadow: inset 0 0 6px transparent; */
  /* 滑块颜色 */
}

/* 设置滚动条轨道背景 */
.container_table>>>.el-table .el-table__body-wrapper::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 6px transparent;
  -webkit-box-shadow: inset 0 0 6px transparent; */
  /*滚动条的颜色*/
  /* background-color: #00BFFF; */
  background-color:transparent!important;
  /* 轨道背景颜色 */
}

.container_table /deep/ .el-table .el-table__header-wrapper .gutter{
	width:0!important;
	background-color:transparent!important;
}
</style>
